编程 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 相关文章推荐

文字幻灯片

Jun 26 Javascript

用js判断用户浏览器是否是XP SP2的IE6

Mar 08 Javascript

一个小型js框架myJSFrame附API使用帮助

Jun 28 Javascript

JavaScript 浮点数运算精度问题

Oct 06 Javascript

再次分享18个非常棒的jQuery表格插件

Apr 10 Javascript

js禁止回车提交表单的示例代码

Dec 23 Javascript

JS表的模拟方法

Feb 05 Javascript

js实现input框文字动态变换显示效果

Aug 19 Javascript

关于JavaScript中事件绑定的方法总结

Oct 26 Javascript

js实现适合新闻类图片的轮播效果

Feb 05 Javascript

Bootstrap实现的经典栅格布局效果实例【附demo源码】

Mar 30 Javascript

微信小程序加载机制及运行机制图解

Nov 27 Javascript

推荐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

PHP框架Swoole定时器Timer特性分析

2014/08/19 PHP

什么是OneThink oneThink后台添加插件步骤

2016/04/13 PHP

Yii2学习笔记之汉化yii设置表单的描述（属性标签attributeLabels）

2017/02/07 PHP

Laravel获取所有的数据库表及结构的方法

2019/10/10 PHP

laravel csrf排除路由,禁止,关闭指定路由的例子

2019/10/21 PHP

ThinkPHP类似AOP思想的参数验证的实现方法

2019/12/18 PHP

Javascript 面向对象继承

2010/05/13 Javascript

SyntaxHighlighter语法高亮插件使用说明

2011/08/14 Javascript

jQuery+ajax实现鼠标单击修改内容的思路

2014/06/29 Javascript

jQuery oLoader实现的加载图片和页面效果

2015/03/14 Javascript

JS绘制生成花瓣效果的方法

2015/08/05 Javascript

jQuery简单实现中间浮窗效果

2016/09/04 Javascript

JS实现禁止鼠标右键的功能

2016/10/15 Javascript

Select2.js下拉框使用小结

2016/10/24 Javascript

深入理解AngularJS中的ng-bind-html指令

2017/03/27 Javascript

基于js的变量提升和函数提升(详解)

2017/09/17 Javascript

vue2.0使用swiper组件实现轮播效果

2017/11/27 Javascript

Vue传参一箩筐(页面、组件)

2019/04/04 Javascript

layui 实现table翻页滚动条位置保持不变的例子

2019/09/05 Javascript

微信小程序拖拽排序列表的示例代码

2020/07/08 Javascript

vue.js 解决v-model让select默认选中不生效的问题

2020/07/28 Javascript

SpringBoot+Vue开发之Login校验规则、实现登录和重置事件

2020/10/19 Javascript

[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn

2014/05/22 DOTA

[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31

2020/11/02 DOTA

使用python将多个excel文件合并到同一个文件的方法

2019/07/09 Python

Django用户认证系统 User对象解析

2019/08/02 Python

Python模块 _winreg操作注册表

2020/02/05 Python

PyPDF2读取PDF文件内容保存到本地TXT实例

2020/05/12 Python

python压包的概念及实例详解

2021/02/17 Python

草莓网美国官网：Strawberrynet USA

2016/12/11 全球购物

意大利奢华内衣制造商：Cosabella

2017/08/29 全球购物

澳大利亚鞋仓库：Shoe Warehouse

2019/07/25 全球购物

幼儿园感谢信

2015/01/21 职场文书

个人维稳承诺书

2015/05/04 职场文书

施工安全保证书

2015/05/09 职场文书

CSS使用SVG实现动态分布的圆环发散路径动画

2022/12/24 HTML / CSS