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

js验证表单大全

Nov 25 Javascript

Jquery 学习笔记（一）

Oct 13 Javascript

javascript 带有滚动条的表格,标题固定,带排序功能.

Nov 13 Javascript

jQuery中clone()方法用法实例

Jan 16 Javascript

js获取元素外链样式的方法

Jan 27 Javascript

jQuery实现复选框成对选择及对应取消的方法

Mar 03 Javascript

原生Javascript和jQuery做轮播图简单例子

Oct 11 Javascript

纯js实现手风琴效果代码

Apr 17 Javascript

bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能

Feb 17 Javascript

微信小程序之分享页面如何返回首页的示例

Mar 28 Javascript

JavaScript的console命令使用实例

Dec 03 Javascript

vue 实现超长文本截取,悬浮框提示

Jul 29 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

Smarty中的注释和截断功能介绍

2015/04/09 PHP

php header函数的常用http头设置

2015/06/25 PHP

浅谈PHP中如何实现Hook机制

2017/11/14 PHP

Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)

2013/07/09 Javascript

JS JSON对象转为字符串的简单实现方法

2013/11/18 Javascript

js添加select下默认的option的value和text的方法

2014/10/19 Javascript

JavaScript 学习笔记之数据类型

2015/01/14 Javascript

nodeJS代码实现计算交社保是否合适

2015/03/09 NodeJs

jQuery使用addClass()方法给元素添加多个class样式

2015/03/26 Javascript

javascript每日必学之运算符

2016/02/16 Javascript

关于cookie的初识和运用(js和jq)

2016/04/07 Javascript

javascript实现图片左右滚动效果【可自动滚动，有左右按钮】

2016/09/19 Javascript

jQuery Chosen通用初始化

2017/03/07 Javascript

jQuery实现页面倒计时并刷新效果

2017/03/13 Javascript

JS使用正则表达式验证身份证号码

2017/06/23 Javascript

vue深入解析之render function code详解

2017/07/18 Javascript

React Navigation 使用中遇到的问题小结

2018/05/08 Javascript

纯javascript前端实现base64图片下载(兼容IE10+)

2018/09/14 Javascript

jQuery序列化form表单数据为JSON对象的实现方法

2018/09/20 jQuery

layer弹出层取消遮罩的方法

2019/09/25 Javascript

Vue自定义表单内容检查rules实例

2020/10/30 Javascript

[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万

2014/05/23 DOTA

[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典

2018/12/16 DOTA

python 提取文件的小程序

2009/07/29 Python

浅谈python类属性的访问、设置和删除方法

2016/07/25 Python

在Python中实现shuffle给列表洗牌

2018/11/08 Python

Pytorch 实现权重初始化

2019/12/31 Python

python生成13位或16位时间戳以及反向解析时间戳的实例

2020/03/03 Python

美国在线购买空气净化器、除湿器、加湿器网站：AllergyBuyersClub

2021/03/16 全球购物

高等教育学专业自荐书

2014/06/17 职场文书

商场消防安全责任书

2014/07/29 职场文书

合同意向书范本

2014/07/30 职场文书

学习党的群众路线对照检查材料

2014/09/29 职场文书

民间借贷借条范本

2015/05/25 职场文书

通过shell脚本对mysql的增删改查及my.cnf的配置

2021/07/07 MySQL

mysql如何查询连续记录

2022/05/11 MySQL