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

Javascript 文件夹选择框的两种解决方案

Jul 01 Javascript

jquery获取URL中参数解决中文乱码问题的两种方法

Dec 18 Javascript

jQuery+CSS实现滑动的标签分栏切换效果

Dec 17 Javascript

JavaScript学习小结之被嫌弃的eval函数和with语句实例详解

Aug 01 Javascript

Node.js 日志处理模块log4js

Aug 28 Javascript

Vue源码学习之初始化模块init.js解析

Nov 02 Javascript

js判断文件类型大小并给出提示的实现方法

Jan 03 Javascript

解决Vue-cli npm run build生产环境打包,本地不能打开的问题

Sep 20 Javascript

vue中的适配px2rem示例代码

Nov 19 Javascript

利用Vue构造器创建Form组件的通用解决方法

Dec 03 Javascript

vue 验证码界面实现点击后标灰并设置div按钮不可点击状态

Oct 28 Javascript

JS数组方法join()用法实例分析

Jan 18 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

Session的工作方式

2006/10/09 PHP

php自动跳转中英文页面

2008/07/29 PHP

php mssql 数据库分页SQL语句

2008/12/16 PHP

php的闭包（Closure）匿名函数详解

2015/02/22 PHP

Yii CDBCriteria常用方法实例小结

2017/01/19 PHP

php使用curl伪造来源ip和refer的方法示例

2018/05/08 PHP

别了 JavaScript中的isXX系列

2012/08/01 Javascript

影响jQuery使用的14个方面

2014/09/01 Javascript

jquery中取消和绑定hover事件的实现代码

2016/06/02 Javascript

jQuery快速实现商品数量加减的方法

2017/02/06 Javascript

Java与JavaScript中判断两字符串是否相等的区别

2017/03/13 Javascript

JS+html5制作简单音乐播放器

2020/09/13 Javascript

require.js与bootstrap结合实现简单的页面登录和页面跳转功能

2017/05/12 Javascript

vue组件jsx语法的具体使用

2018/05/21 Javascript

Element-UI踩坑之Pagination组件的使用

2018/10/29 Javascript

用Golang运行JavaScript的实现示例

2019/11/25 Javascript

antd-mobile ListView长列表的数据更新遇到的坑

2020/04/08 Javascript

原生小程序封装跑马灯效果

2020/10/21 Javascript

微信小程序自定义胶囊样式

2020/12/27 Javascript

[16:56]教你分分钟做大人：司夜刺客

2014/10/30 DOTA

python简单实现基于SSL的IRC bot实例

2015/06/15 Python

树莓派实现移动拍照

2019/06/22 Python

Pytorch 抽取vgg各层并进行定制化处理的方法

2019/08/20 Python

详解pyinstaller selenium python3 chrome打包问题

2019/10/18 Python

python NumPy ndarray二维数组按照行列求平均实例

2019/11/26 Python

Python爬虫库requests获取响应内容、响应状态码、响应头

2020/01/25 Python

澳大利亚小众服装品牌：Maurie & Eve

2018/03/27 全球购物

Servlet面试题库

2015/07/18 面试题

个人找工作的自我评价

2013/10/17 职场文书

人力资源作业细则

2014/03/03 职场文书

保护环境建议书

2014/03/12 职场文书

市场部经理岗位职责

2014/04/10 职场文书

领导班子“四风问题”“整改方案

2014/10/02 职场文书

小学老师对学生的评语

2014/12/29 职场文书

初三语文教学反思

2016/03/03 职场文书

微软Win11 全新照片应用面向 Dev预览版推出新版本上手体验图集

2022/09/23 数码科技