资讯频道 → Web前端
阅读更多

2顶
0踩

Web前端

翻译新闻 10个关于视差滚动效果的教程和插件

2012-03-21 13:10 by 正式编辑 nemohq 评论(1) 有23067人浏览
jquery css 视差滚动效果
近些年来，用户对视觉体验的要求不断提高，而设计师们也开始在网页设计中加入各种特效元素以满足用户的需求。其中有一种特效的效果很具有吸引力，它就是视差滚动效果。视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，可以带来非常出色的视觉体验。

随着这种炫酷的效果首次在Nike 2011年的 Nike Better World 项目中完美展现，如今这种视差滚动效果被越来越多的国外网站所应用，成为Web设计的热点趋势。因此，本文整理了十种关于此效果的教程和插件和大家分享，希望为你的网站设计提供一些灵感。

不过有两个方面需要读者注意：
  1. 以大量图片为特色的网站应该考虑图像的预加载问题，以便为用户提供更好更流畅的视觉体验；
  2. 某些网站页面在移动设备上的效果可能较之在PC上有所不同，一些功能也可能无法正常使用。

1、Parallax Slider

一个超级棒的插件，为你的网站提供纵深和滑动效果。


2、Javascript视差效果

一份帮助你增加网页立体层次感的教程。


3、Nike Better World场景的背后

一份为那些急切想重现NIKE网站滚动效果的设计师准备的教程。


4、用jQuery和CSS构建一个具有视差滚动效果的网站界面

一份为那些想在此领域了解的更深的设计师准备的例子和教程。


5、用JQuery创建一个时尚的具有视差背景的效果

一份教程，在背景上帮你添加一些滚动的云彩。



6、动画背景式的网页头部

用一个动画式的网页头部来让你的访问者为你欢呼吧！


7、视差滚动教程

一份视差效果和内容同时出现的有趣的教程。


8、JQuery Image Prallax

一个通过重复和动画运动产生立体错觉的插件。


9、Stellar.js

一个为任何滚动元素提供视差滚动效果的JQuery插件。


10、Curtain.js

允许你嵌入一个类似于幕布升起的效果到你的网页中。


英文原文：10 Useful Tutorials And Plugins for creating Parallax and scrolling effects.
  • 大小: 46.6 KB
  • 大小: 36 KB
  • 大小: 33.4 KB
  • 大小: 39.1 KB
  • 大小: 9.1 KB
  • 大小: 42.6 KB
  • 大小: 43.3 KB
  • 大小: 48.8 KB
  • 大小: 31.6 KB
  • 大小: 36.9 KB
来自: WebDesignBooth
2
顶
0
踩
评论 共 1 条 请登录后发表评论
1 楼 kanme818 2012-03-22 13:49
一直觉得这种效果很有意思

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Global site tag (gtag.js) - Google Analytics