编程 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版代码高亮

Jun 26 Javascript

输入自动提示搜索提示功能的javascript:sugggestion.js

Sep 02 Javascript

JavaScript实现的GBK、UTF8字符串实际长度计算函数

Aug 27 Javascript

JS解析XML实例分析

Jan 30 Javascript

JavaScript跨平台的开源框架NativeScript

Mar 24 Javascript

JavaScript 里的类数组对象

Apr 08 Javascript

深入解读JavaScript中的Iterator和for-of循环

Jul 28 Javascript

Angular.js跨controller实现参数传递的两种方法

Feb 20 Javascript

微信小程序实现滑动删除效果

May 19 Javascript

教你使用vue-cli快速构建的小说阅读器

May 13 Javascript

JavaScript实现简单的图片切换功能(实例代码)

Apr 10 Javascript

js实现模拟购物商城案例

May 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

PHP学习笔记之数组篇

2011/06/28 PHP

php多个字符串替换成同一个的解决方法

2013/06/18 PHP

php使用fgetcsv读取csv文件出现乱码的解决方法

2014/11/08 PHP

分享常见的几种页面静态化的方法

2015/01/08 PHP

javascript实现获取字符串hash值

2015/05/10 Javascript

JQuery.Ajax()的data参数类型实例详解

2015/11/20 Javascript

jQuery Validate插件实现表单强大的验证功能

2015/12/18 Javascript

JS基于面向对象实现的多个倒计时器功能示例

2017/02/28 Javascript

Vue.js 2.0 移动端拍照压缩图片预览及上传实例

2017/04/27 Javascript

详解微信小程序通过控制CSS实现view隐藏与显示

2017/05/24 Javascript

详解Vue2.0里过滤器容易踩到的坑

2017/06/01 Javascript

JS 组件系列之BootstrapTable的treegrid功能

2017/06/16 Javascript

使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解

2017/07/24 Javascript

React-Native使用Mobx实现购物车功能

2017/09/14 Javascript

Javascript Promise用法详解

2018/05/10 Javascript

JavaScript实现的前端AES加密解密功能【基于CryptoJS】

2018/08/28 Javascript

微信小程序背景音乐开发详解

2019/12/12 Javascript

vuex Module将 store 分割成模块的操作

2020/12/07 Vue.js

[04:20]DOTA2-DPC中国联赛正赛 VG vs LBZS 选手采访 1月19日

2021/03/11 DOTA

Python 12306抢火车票脚本

2018/02/07 Python

利用python实现简易版的贪吃蛇游戏（面向python小白）

2018/12/30 Python

python IDLE 背景以及字体大小的修改方法

2019/07/12 Python

为什么说Python可以实现所有的算法

2019/10/04 Python

Django配置跨域并开发测试接口

2020/11/04 Python

Python使用Pygame绘制时钟

2020/11/29 Python

解决pytorch下出现multi-target not supported at的一种可能原因

2021/02/06 Python

阿里健康官方海外旗舰店：阿里健康国际自营

2017/11/24 全球购物

微软中国官方商城：Microsoft Store中国

2018/10/12 全球购物

个人自我鉴定

2013/11/07 职场文书

艺校音乐专业自我鉴定范文

2014/03/01 职场文书

《鲁班和橹板》教学反思

2014/04/27 职场文书

给校长的建议书300字

2014/05/16 职场文书

高中生学习计划书

2014/09/15 职场文书

党员个人对照检查材料思想汇报

2014/09/16 职场文书

幼儿园感谢信

2015/01/21 职场文书

清明节主题班会

2015/08/14 职场文书