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

由prototype_1.3.1进入javascript殿堂－类的初探

Nov 06 Javascript

JavaScript效率调优经验

Jun 04 Javascript

jquery多浏览器捕捉回车事件代码

Jun 22 Javascript

window.addEventListener来解决让一个js事件执行多个函数

Dec 26 Javascript

javascript重复绑定事件造成的后果说明

Mar 02 Javascript

js函数获取html中className所在的内容并去除标签

Sep 08 Javascript

jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标

Mar 06 Javascript

jQuery实现美观的多级动画效果菜单代码

Sep 06 Javascript

jQuery通过ajax方法获取json数据不执行success的原因及解决方法

Oct 15 Javascript

不得不看之JavaScript构造函数及new运算符

Aug 21 Javascript

解决Vue的项目使用Element ui 走马灯无法实现的问题

Aug 03 Javascript

json.stringify()与json.parse()的区别以及用处

Jan 25 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程序的方法

2009/03/09 PHP

比较时间段一与时间段二是否有交集的php函数

2011/05/31 PHP

PHP中操作ini配置文件的方法

2013/04/25 PHP

基于empty函数的判断详解

2013/06/17 PHP

php数组添加与删除单元的常用函数实例分析

2015/02/16 PHP

2015/03/13 PHP

PHP连接MySQL数据的操作要点

2015/03/20 PHP

jQuery+php简单实现全选删除的方法

2016/11/28 PHP

php实现PDO中捕获SQL语句错误的方法

2017/02/16 PHP

PHP实现的策略模式示例

2019/03/20 PHP

详解CSS样式中的 !important * _ 符号

2021/03/09 HTML / CSS

JS去除字符串的空格增强版(可以去除中间的空格)

2009/08/26 Javascript

禁止你的左键复制实用技巧

2013/01/04 Javascript

NODE.JS加密模块CRYPTO常用方法介绍

2014/06/05 Javascript

与Math.pow 相反的函数使用介绍

2014/08/04 Javascript

页面加载完后自动执行一个方法的js代码

2014/09/06 Javascript

Nodejs抓取html页面内容（推荐）

2016/08/11 NodeJs

mvc 、bootstrap 结合分布式图简单实现分页

2016/10/10 Javascript

jQuery实现表格冻结顶栏效果

2017/08/20 jQuery

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

2021/01/04 Javascript

[54:15]DOTA2-DPC中国联赛正赛 DLG vs Dragon BO3 第二场2月1日

2021/03/11 DOTA

python3.5 + PyQt5 +Eric6 实现的一个计算器代码

2017/03/11 Python

Python 由字符串函数名得到对应的函数(实例讲解)

2017/08/10 Python

python-str,list,set间的转换实例

2018/06/27 Python

详解Python 中sys.stdin.readline()的用法

2019/09/12 Python

利用scikitlearn画ROC曲线实例

2020/07/02 Python

西班牙在线宠物商店：zooplus.es

2017/02/24 全球购物

开办大学饮食联盟创业计划书

2014/01/29 职场文书

五型班组建设方案

2014/02/10 职场文书

座谈会主持词

2014/03/20 职场文书

公民授权委托书范本

2014/09/17 职场文书

2014党支部对照检查材料思想汇报

2014/10/05 职场文书

财务工作失职检讨书

2014/11/21 职场文书

2015年艾滋病宣传活动总结

2015/03/27 职场文书

警告通知

2015/04/25 职场文书

2016应届毕业生实习心得体会

2015/10/09 职场文书