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

jQuery中queue()方法用法实例

Dec 29 Javascript

javascript 实现原路返回

Jan 21 Javascript

浅谈javascript中的instanceof和typeof

Feb 27 Javascript

原生js制作简单的数字键盘

Apr 24 Javascript

详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

Dec 03 Javascript

js轮盘抽奖实例分析

Apr 17 Javascript

JavaScript 巧学巧用

May 23 Javascript

vue2项目使用sass的示例代码

Jun 28 Javascript

Node.js中读取TXT文件内容fs.readFile()用法

Oct 10 Javascript

JQuery Ajax跨域调用和非跨域调用问题实例分析

Apr 16 jQuery

Django+Vue实现WebSocket连接的示例代码

May 28 Javascript

微信jssdk踩坑之签名错误invalid signature

May 19 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

thinkphp3.x中display方法及show方法的用法实例

2016/05/19 PHP

YII框架页面缓存操作示例

2019/04/29 PHP

jquery 指南/入门基础

2007/11/30 Javascript

javascript实现的基于金山词霸网络翻译的代码

2010/01/15 Javascript

jquery控制listbox中项的移动并排序的实现代码

2010/09/28 Javascript

js获取select标签选中值的两种方式

2014/01/09 Javascript

jquery实现保存已选用户

2014/07/21 Javascript

Javascript冒泡排序算法详解

2014/12/03 Javascript

Bootstrap实现input控件失去焦点时验证

2016/08/04 Javascript

gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)

2016/08/24 Javascript

JavaScript编写一个简易购物车功能

2016/09/17 Javascript

CSS+jQuery实现简单的折叠菜单

2016/12/20 Javascript

Angular实现跨域(搜索框的下拉列表)

2017/02/16 Javascript

Angular.js中下拉框实现渲染html的方法

2017/06/18 Javascript

原生JS获取元素的位置与尺寸实现方法

2017/10/18 Javascript

详细分析JS函数去抖和节流

2017/12/05 Javascript

vue iview组件表格 render函数的使用方法详解

2018/03/15 Javascript

Node.js模拟发起http请求从异步转同步的5种用法

2018/09/26 Javascript

jquery.param()实现数组或对象的序列化方法

2018/10/08 jQuery

jQuery.validate.js表单验证插件的使用代码详解

2018/10/22 jQuery

vue实现选中效果

2020/10/07 Javascript

[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛

2014/05/26 DOTA

Python人脸识别初探

2017/12/21 Python

Python利用正则表达式实现计算器算法思路解析

2018/04/25 Python

python 列表降维的实例讲解

2018/06/28 Python

pandas数据处理进阶详解

2019/10/11 Python

Python插入Elasticsearch操作方法解析

2020/01/19 Python

css 省略号 css3让多余的字符串消失并附加省略号的实现代码

2013/02/07 HTML / CSS

HTML5视频支持检测(检查浏览器是否支持视频播放)

2013/06/08 HTML / CSS

Corelle官方网站：购买康宁餐具

2016/11/02 全球购物

学雷锋标语

2014/06/25 职场文书

商场周年庆活动方案

2014/08/19 职场文书

韩语专业职业生涯规划范文：成功之路就在我们脚下

2014/09/11 职场文书

入党积极分子十八届四中全会思想汇报

2014/10/23 职场文书

关于五一放假的通知

2015/08/18 职场文书

详解vue身份认证管理和租户管理

2021/05/25 Vue.js