编程 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 火狐(firefox)不显示本地图片问题解决

Jul 05 Javascript

文本框中,回车键触发事件的js代码[多浏览器兼容]

Jun 07 Javascript

jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍

Nov 21 Javascript

基于Jquery实现仿百度百科右侧导航代码附源码下载

Nov 27 Javascript

js多功能分页组件layPage使用方法详解

May 19 Javascript

JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法

Aug 05 Javascript

vue.js 表格分页ajax 异步加载数据

Oct 18 Javascript

使用JQuery实现图片轮播效果的实例(推荐)

Oct 24 jQuery

jQuery实现ajax回调函数带入参数的方法示例

Jun 26 jQuery

jQuery实现获取及设置CSS样式操作详解

Sep 05 jQuery

茶余饭后聊聊Vue3.0响应式数据那些事儿

Oct 30 Javascript

element-ui封装一个Table模板组件的示例

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

攻克CakePHP系列二表单数据显示

2008/10/22 PHP

PHP中PDO的错误处理

2011/09/04 PHP

php表单提交与$_POST实例分析

2015/01/26 PHP

PHP简单验证码功能机制实例详解

2019/03/27 PHP

JavaScript 解析读取XML文档实例代码

2009/07/07 Javascript

javascript 45种缓动效果非常酷

2011/06/28 Javascript

在JavaScript中typeof的用途介绍

2013/04/11 Javascript

jquery阻止冒泡事件使用模拟事件

2013/09/06 Javascript

jquery validation验证身份证号,护照,电话号码,email(实例代码)

2013/11/06 Javascript

倒记时60刷新网页的js代码

2014/02/18 Javascript

分享两个手机访问pc网站自动跳转手机端网站代码

2020/12/24 Javascript

js实现固定显示区域内自动缩放图片的方法

2015/07/18 Javascript

实例讲解JS中setTimeout()的用法

2016/01/28 Javascript

理解js回收机制通俗易懂版

2016/02/29 Javascript

JS实时弹出新消息提示框并有提示音响起的实现代码

2016/04/20 Javascript

Angular 中 select指令用法详解

2016/09/29 Javascript

yarn的使用与升级Node.js的方法详解

2017/06/04 Javascript

基于Vue实例对象的数据选项

2017/08/09 Javascript

JS模拟超市简易收银台小程序代码解析

2017/08/18 Javascript

Vue.js实现表格渲染的方法

2018/09/07 Javascript

webpack的 rquire.context用法实现工程自动化的方法

2020/02/07 Javascript

解决Nuxt使用axios跨域问题

2020/07/06 Javascript

python3通过selenium爬虫获取到dj商品的实例代码

2019/04/25 Python

windows环境中利用celery实现简单任务队列过程解析

2019/11/29 Python

解决python 读取 log日志的编码问题

2019/12/24 Python

python中查看.db文件中表格的名字及表格中的字段操作

2020/07/07 Python

Python Selenium库的基本使用教程

2021/01/04 Python

python编写扎金花小程序的实例代码

2021/02/23 Python

国际知名军事风格休闲装品牌：Alpha Industries（阿尔法工业）

2017/05/24 全球购物

实习自我评价怎么写

2013/12/02 职场文书

工程造价专业求职信

2014/07/17 职场文书

房屋过户委托书范本

2014/10/07 职场文书

《富饶的西沙群岛》教学反思

2016/02/16 职场文书

《悬崖边的树》读后感2篇

2019/12/02 职场文书

vue项目配置sass及引入外部scss文件

2022/04/14 Vue.js

安装harbor作为docker镜像仓库的问题

2022/06/14 Servers