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

Safari5中alert的无限循环BUG

Apr 07 Javascript

jquery弹出框的用法示例(一)

Aug 26 Javascript

jquery实现相册一下滑动两次的方法

Feb 09 Javascript

javascript中异常处理案例(推荐)

Oct 03 Javascript

浅谈Node.js：理解stream

Dec 08 Javascript

使用ES6语法重构React代码详解

May 09 Javascript

JavaScript实现的超简单计算器功能示例

Dec 23 Javascript

微信小程序之swiper轮播图中的图片自适应高度的方法

Apr 23 Javascript

vue实现底部菜单功能

Jul 24 Javascript

简述vue-cli中chainWebpack的使用方法

Jul 30 Javascript

这样回答继承可能面试官更满意

Dec 10 Javascript

用webAPI实现图片放大镜效果

Nov 23 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

全国FM电台频率大全 - 6 辽宁省

2020/03/11 无线电

php fputcsv命令写csv文件遇到的小问题（多维数组连接符）

2011/05/24 PHP

PHP中CheckBox多选框上传失败的代码写法

2017/02/13 PHP

PHP 7安装调试工具Xdebug扩展的方法教程

2017/06/17 PHP

jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、Chrome、Opera

2009/08/28 Javascript

说明你的Javascript技术很烂的五个原因

2011/04/26 Javascript

提取字符串中年月日的函数代码

2013/11/05 Javascript

Jquery获取和修改img的src值的方法

2014/02/17 Javascript

以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题

2015/11/13 Javascript

判断输入的字符串是否是日期格式的简单方法

2016/07/11 Javascript

Vue 中批量下载文件并打包的示例代码

2017/11/20 Javascript

vue中$nextTick的用法讲解

2019/01/17 Javascript

详解Vue源码中一些util函数

2019/04/24 Javascript

编写更好的JavaScript条件式和匹配条件的技巧(小结)

2019/06/27 Javascript

layui使用form表单实现post请求页面跳转的方法

2019/09/14 Javascript

Vue Router 实现动态路由和常见问题及解决方法

2020/03/06 Javascript

微信小程序使用GoEasy实现websocket实时通讯

2020/05/19 Javascript

vue前端和Django后端如何查询一定时间段内的数据

2021/02/28 Vue.js

[53:15]2018DOTA2亚洲邀请赛3月29日小组赛A组 KG VS OG

2018/03/30 DOTA

在Python的Django框架上部署ORM库的教程

2015/04/20 Python

python简单分割文件的方法

2015/07/30 Python

Python中Numpy ndarray的使用详解

2019/05/24 Python

python中的协程深入理解

2019/06/10 Python

django mysql数据库及图片上传接口详解

2019/07/18 Python

python3 字符串知识点学习笔记

2020/02/08 Python

使用 prometheus python 库编写自定义指标的方法(完整代码)

2020/06/29 Python

python基于openpyxl生成excel文件

2020/12/23 Python

纯CSS3实现的8种Loading动画效果

2014/07/05 HTML / CSS

HTML5 标准将把互联网视频扔回到黑暗时代

2010/02/10 HTML / CSS

后勤部长岗位职责

2013/12/14 职场文书

优秀少先队大队辅导员事迹材料

2014/05/04 职场文书

不尊敬老师的检讨书

2014/12/21 职场文书

集团财务总监岗位职责

2015/04/03 职场文书

2015年机关党委工作总结

2015/05/23 职场文书

MySQL约束超详解

2021/09/04 MySQL

Oracle表空间与权限的深入讲解

2021/11/17 Oracle