我很确信时不时你设计网站的时候,都会想多使用一些东西。那些的东西能够添加额外的功能及其加强,不仅仅提供给用户更加容易的方式去找寻信息,同时也使用一个更加干净的方式来呈现信息。
这里没有特定顺序,我将推荐给大家一些我亲自选择的jQuery插件和一些CSS3的小技巧。当然,使用这些设计的概念,相信你的设计将会超越过去!
jQuery插件
1. Fly-out menu
飞出的菜单,一个非常优秀的使用加大字体的方式展示重点内容的插件。
2. Grid portfolio
一个非常优雅的使用快速预览内容的方式来展现项目的插件。
建议:和其它改变大小的元素一起使用,这样用户可以看到他们重新安排。
3. 滑出风格的上下文提示
使用平滑动画的扩展工具提示,能够提示更多地内容。
提示:使用图片显示几个产品,或者用来高亮介绍你的作品集。
4. Quicksand - 排序和过滤
这个插件是一个非常不错的动画排序和过滤排序插件,我们曾经使用它开发过很酷的html5应用。你肯定会喜欢。
感谢 gbin1.com 的投稿
5. Sunday morning - 变化插件
有点老,不过很酷的插件。添加简单和吸引人的方式来变化网站或者一部分。
6. jVectorMap
互动的地图,提供扩展使用。包括世界地图,美国,欧洲和德国地图。
7. Shuffle letters effect
非常不错的一个文字动画特效,这里查看原文翻译。
8. Mosaiqy - 图片随机插件
帮助你在一个网格中显示图片,并且使用Rubik‘s cube方式来随机展示。
9. Sponsor wall flip
虽然我们称之为Sponsor wall flip, 其实它还有其它的用处。 展示logo并且能够让你反面展示一定得介绍内容。
感谢 gbin1.com 的投稿
10. 多彩的jQuery时钟
添加了一个多彩时尚的时钟到你的设计中,也可以用作一个新网站上线的倒计时。
11. MopTip2
MopTip2是一个帮助你添加自定义的小提示的插件。这个小提示可以自动关闭或者手工关闭。也可以用来显示图片
12. Grumble
另外一个非常有特色的工具小提示,可以使用CSS样式设计成你需要的任何样子
13. jQuery Timelnr
这个插件我们曾经介绍过,能够帮助你创建非常酷的时间线效果。
14. Flexible nav
这个插件我们也曾经介绍过,帮助你生成一个页面的内导航的效果。
感谢 gbin1.com 的投稿
15. Deck - HTML的演讲稿
是否想过Powerpoint或者keynote演讲方式太复杂?那么可以看看这个插件!使用Deck可以帮助你创建在线的HTML演讲,并且拥有大量的使用方式,一个e-learning类型产品的选择之一。
16. 类苹果的Retina效果
通过帮助你的用户看清楚细节从而提高你用户使用体验
17. jQuery的pageSlide
简单有效的页面幻灯帮助你通过拖拽整个页面来显示内容,然而并不扰乱其它元素。
建议:可以用来隐藏一个垂直的导航,为全页面内容预留出空间
18. jqFancytranistion
一个简单的并且光滑的图片库展示,使用条状的变化及其不同的几种格式。
19. Panning slideshow
一个移动镜头类型的幻灯展示, 将图片拼接起来并且轮流播放
感谢 gbin1.com 的投稿
20. jqZoom
类似Reina插件,jqZoom可以用来定制,拥有很多选项。例如,拖放缩放或者通过mouse over
21. 3D tag clould
通过创建一个球体来添加一点儿创新到你的标签云中。通过click和拖放来旋转,并且使用鼠标滚轮来缩放。这个插件将所有拥有tag class的div标签转化成一个球形。
22. JEffects
JEeffects是一个包含很多效果的插件 ,能够应用到网站中很多元素中。例如,它可以应用到input字段来生成一个非常令人满意的效果,可惜不是免费的!
23. PhotoShelf
PhotoShelf是一个非常优雅的图片库,允许你滚动一套图片,并且缩放指定的图片。通过可以添加分隔符来组织你的内容
24. Grid accordion
一个双向的手风琴效果。它能够平滑的扩展自己更加方便简单的让用户阅读内容,为子类留出空间,同时能在菜单中显示内容。
感谢 gbin1.com 的投稿
25. Latest tweets tooltip
一个非常有趣的插件帮助你在一个可变化大小的小提示中显示最新关于某个主题的tweets内容
更多不错的CSS小技巧:
1. CSS3过渡,变形和动画
介绍所有你想知道的相关CSS3的内容,并且包含一些如何创造更好效果的教程
2. Pure CSS Animation
正如标题所表单的意义,这个简单但是多彩的效果是CSS3实现的,利用了锚定。
3. OS X dock
使用CSS3创建一个OS X类型的停靠效果,并且包含反射来提高设计效果
4. CSS media query
学习如何通过大小来隐藏和显示元素。一个实现响应web设计的方式
5. CSS3 multi column
使用一行代码来分隔一个文字容器到多列,生成动态内容。
via:1stwebdesigner
来源:http://www.gbin1.com/
感谢 gbin1.com 的投稿