视差滚动(Parallax Scrolling)概念及10个实用插件

Parallax Scrolling”是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。近些年来,用户对视觉体验的要求不断提高,而设计师们也开始在网页中加入各种特效元素以满足用户的需求。这也是“Parallax Scrolling”具有吸引力,让很Web设计师亲眯的原因。而且现在很多网站已经开始在使用了,并且在今年将会更容易看到这样的网站诞生。

视差滚动效果简单点理解就是指用户让通过鼠标实现网页多层背景以不同的速度移动,从而形成立体的运动效果,带来非常出色的视觉和交互体验。这种特效最早是惊现在Nike 2011年的Nike Better World项目里,时至今日,这种视差滚动效果被越来越多的国外网站所应用,成为Web设计的热点趋势。这种网站通常通过鼠标滚轮滚动来实现,用超酷的视觉体验来取代枯燥的页面滚动,从而“吸引”用户走向自己的目标。

1. Stella.js

10个优秀视差滚动插件

Stella.js能很容易帮助创建一个视差滚动网站。他的文档也非常的简单。先给你的网站添加数据,然后通过“stallar()”函数来调用。

demodownload

2. Super Scrollorama

10个优秀视差滚动插件

Super Scrollorama很牛的一个插件,鼠标滚动来控制Web元素显示或隐藏。

demodownload

3. jQuery Scroll Path

10个优秀视差滚动插件

没有垂直滚动,通过jQuery scroll path插件,你可以定义很多路径,来实现滚动效果。

demodownload

4. Curtain.js

10个优秀视差滚动插件

这个插件充许你使用多个固定面板来创建一个页面,而且这些面板可以实现类似于卷帘的效果。

demodownload

5. Plax

10个优秀视差滚动插件

Plax插件可以通过鼠标的悬浮或移动来触发视差滚动效果。

demodownload

6. Scrolldeck

10个优秀视差滚动插件

相当简单的一个插件,以每个div作为一个幻灯片,用来制作视差滚动效果。

demodownload

7. jParallax

10个优秀视差滚动插件

jParallax通过鼠标移动来控制节点的定位层,实现移动的视差效果。

demodownload

8. Spritely

10个优秀视差滚动插件

Spritely是一个轻量级插件,通过简单的方法制作动画的sprites和动态滚动背景图,从而达到视差效果。

demodownload

9. Scrolling Parallax

10个优秀视差滚动插件

Scrolling Parallax是一款通过滚动条或鼠标移动来实现视差效果的jQuery插件。它充许一张背景图片以不同的速度来移动,从而实现视差滚动效果。

demodownload

10. jQuery Waypoints

10个优秀视差滚动插件

Waypoints是一个简单的jQuery插件,通过一个简单的函数就能实现视差滚动效果。

demodownload

 

原文地址:http://www.w3cplus.com/source/10-best-Parallax-Scrolling-plugin.html

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值