编程 Javascript

六款帮助你实现惊艳视差滚动效果的jQuery插件

Posted in Javascript onSeptember 14, 2012

在网页设计中，视差滚动（Parallax Scrolling）是当下流行的网页设计技术，通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果。下面是一些运用视差滚动效果的优秀网页案例：

视差（Parallax）是指从不同的点看一个物体时形成的视觉差异，这个名词是源自希腊文的παράλλαξις (parallaxis)，意思是"改变"。在网页设计中，视差滚动（Parallax Scrolling）是当下流行的网页设计技术，通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果。下面是一些运用视差滚动效果的优秀网页案例：

相信你非常想知道上面这些网页的精美视差滚动效果是如何实现的，今天这篇文章就和大家分享六款精心挑选的 jQuery 视差滚动效果插件，它们能够帮助你制作出精美的视差滚动效果。

Sequence.js

Sequence 是一款非常优秀的 jQuery 滑动插件，能实现多种精美的滑动效果，其中之一就是水平方向的视差滚动。

六款帮助你实现惊艳视差滚动效果的jQuery插件

在线演示下载源码

jQuery Scroll Path

这款插件用于实现自定义路径的滚动效果。可以显示使用 Canvas 绘制路径线条和弧形，看到非常形象的运动效果。

六款帮助你实现惊艳视差滚动效果的jQuery插件

在线演示下载源码

Parallax Slider with jQuery

这个视差滚动滑动效果多次在我的博文中出现过，相信关注我博客的朋友一定不会陌生，有非常详细的制作教程。

六款帮助你实现惊艳视差滚动效果的jQuery插件

在线演示下载源码

jQuery Parallax

这款 jQuery 插件实现了类似 Nikebetterworld.com 产品展示页面的视差滚动效果，代码托管在 Github 上面。

六款帮助你实现惊艳视差滚动效果的jQuery插件

在线演示下载源码

Scrollorama

这款 jQuery 插件能够帮助你实现非常酷的滚动效果，可以应用飞入、缩放、淡入淡出等多种过渡效果。

六款帮助你实现惊艳视差滚动效果的jQuery插件

在线演示下载源码

Stellar.js

正如它的口号所说：实现视差滚动效果从未如此容易，的确，它能帮助轻松的实现网页视差滚动效果。

六款帮助你实现惊艳视差滚动效果的jQuery插件

在线演示下载源码

jParallax

这款基于 jQuery 的视差滚动插件使用简单，官方提供了五种不同的效果演示。

六款帮助你实现惊艳视差滚动效果的jQuery插件

在线演示下载源码

六款帮助你实现惊艳视差滚动效果的jQuery插件

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

9个JavaScript评级/投票插件

Jan 18 Javascript

JS实现在Repeater控件中创建可隐藏区域的代码

Sep 16 Javascript

location.href用法总结(最主要的)

Dec 27 Javascript

js取值中form.all和不加all的区别介绍

Jan 20 Javascript

Angular2利用组件与指令实现图片轮播组件

Mar 27 Javascript

JavaScript 数组的进化与性能分析

Sep 18 Javascript

最适应的vue.js的form提交涉及多种插件【推荐】

Aug 27 Javascript

Vue弹出菜单功能的实现代码

Sep 12 Javascript

vue-i18n结合Element-ui的配置方法

May 20 Javascript

js实现3D粒子酷炫动态旋转特效

Sep 13 Javascript

js闭包的9个使用场景

Dec 29 Javascript

vue backtop组件的实现完整代码

Apr 07 Vue.js

推荐17个优美新鲜的jQuery的工具提示插件

Sep 14 #Javascript

Java 正则表达式学习总结和一些小例子

Sep 13 #Javascript

获取客户端电脑日期时间js代码(jquery)

Sep 12 #Javascript

IE中jquery.form中ajax提交没反应解决方法分享

Sep 11 #Javascript

jquery ajax例子返回值详解

Sep 11 #Javascript

Jquery插件写法笔记整理

Sep 06 #Javascript

基于jquery的用鼠标画出可移动的div

Sep 06 #Javascript

You might like

PHP5中虚函数的实现方法分享

2011/04/20 PHP

PHP源代码数组统计count分析

2011/08/02 PHP

PHP比你想象的好得多

2014/11/27 PHP

ThinkPHP发送邮件示例代码

2016/10/08 PHP

jQuery中add实现同时选择两个id对象

2010/10/22 Javascript

基于jQuery的Tab选项框效果代码(插件)

2011/03/01 Javascript

javascript 实现字符串反转的三种方法

2013/11/23 Javascript

createTextRange()的使用示例含文本框选中部分文字内容

2014/02/24 Javascript

Javascript 构造函数详解

2014/10/22 Javascript

JS通过Cookie判断页面是否为首次打开

2016/02/05 Javascript

详解AngularJS中的表单验证(推荐)

2016/11/17 Javascript

Vue2.0学习之详解Vue 组件及父子组件通信

2017/12/12 Javascript

实战node静态文件服务器的示例代码

2018/03/08 Javascript

vue.js使用watch监听路由变化的方法

2018/07/08 Javascript

Vue.js 使用v-cloak后仍显示变量的解决方法

2018/11/19 Javascript

使用localStorage替代cookie做本地存储

2019/09/25 Javascript

vuex存值与取值的实例

2019/11/06 Javascript

微信小程序wxs实现吸顶效果

2020/01/08 Javascript

Node.js API详解之 string_decoder用法实例分析

2020/04/29 Javascript

[46:00]Ti4 冒泡赛第二轮LGD vs C9 2

2014/07/14 DOTA

[00:43]2016完美“圣”典风云人物：单车宣传片

2016/12/02 DOTA

[03:17]DOTA2-DPC中国联赛1月29日Recap集锦

2021/03/11 DOTA

跟老齐学Python之玩转字符串(1)

2014/09/14 Python

python使用fileinput模块实现逐行读取文件的方法

2015/04/29 Python

对numpy中的数组条件筛选功能详解

2018/07/02 Python

Python 实现敏感目录扫描的示例代码

2020/05/21 Python

带你学习Python如何实现回归树模型

2020/07/16 Python

Python用requests库爬取返回为空的解决办法

2021/02/21 Python

EJB2和EJB3在架构上的不同点

2014/09/29 面试题

成人大专自我鉴定范文

2013/10/19 职场文书

信息部岗位职责

2013/11/12 职场文书

市场营销专业毕业生求职信

2014/03/26 职场文书

社区工作者演讲稿

2014/05/23 职场文书

日语专业毕业生自荐书

2014/06/18 职场文书

2014年服务员工作总结

2014/11/18 职场文书

在职证明范本

2015/06/15 职场文书