编程 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人脸识别技术及脸部识别JavaScript类库Tracking.js

Sep 14 Javascript

使用JQuery实现的分页插件分享

Nov 05 Javascript

详解AngularJS1.6版本中ui-router路由中/#!/的解决方法

May 22 Javascript

详解vue嵌套路由-params传递参数

May 23 Javascript

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

Jan 09 Javascript

基于vue-router 多级路由redirect 重定向的问题

Sep 03 Javascript

WebGL three.js学习笔记之阴影与实现物体的动画效果

Apr 25 Javascript

Vue.js中的extend绑定节点并显示的方法

Jun 20 Javascript

js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结

Mar 04 Javascript

如何在node环境实现“get数据解析”代码实例

Jul 03 Javascript

vue添加自定义右键菜单的完整实例

Dec 08 Vue.js

vue 实现click同时传入事件对象和自定义参数

Jan 29 Vue.js

推荐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

ajax+php打造进度条代码[readyState各状态说明]

2010/04/12 PHP

Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法

2010/12/29 PHP

下载站控制介绍字数显示的脚本显示全部隐藏介绍等功能

2009/09/19 Javascript

Ajax执行顺序流程及回调问题分析

2012/12/10 Javascript

jquery入门必备的基本认识及实例(整理)

2013/06/24 Javascript

仿百度输入框智能提示的js代码

2013/08/22 Javascript

使用简洁的jQuery方法实现隔行换色功能

2014/01/02 Javascript

AngularJS控制器继承自另一控制器

2016/05/09 Javascript

js编写一个简单的产品放大效果代码

2016/06/27 Javascript

Bootstrap实现带动画过渡的弹出框

2016/08/09 Javascript

JS实现仿PS的调色板效果完整实例

2016/12/21 Javascript

BootStrap TreeView使用实例详解

2017/11/01 Javascript

关于Vue在ie10下空白页的debug小结

2018/05/02 Javascript

详解处理bootstrap4不支持远程静态框问题

2018/07/20 Javascript

vue使用vuex实现首页导航切换不同路由的方法

2019/05/08 Javascript

前端js中的事件循环eventloop机制详解

2019/05/15 Javascript

微信小程序入门之指南针

2020/10/22 Javascript

树莓派中python获取GY-85九轴模块信息示例

2013/12/05 Python

Python赋值语句后逗号的作用分析

2015/06/08 Python

Python建立Map写Excel表实例解析

2018/01/17 Python

python爬虫自动创建文件夹的功能

2018/08/01 Python

Python实现微信翻译机器人的方法

2019/08/13 Python

Django Serializer HiddenField隐藏字段实例

2020/03/31 Python

python读取图像矩阵文件并转换为向量实例

2020/06/18 Python

python suds访问webservice服务实现

2020/06/26 Python

Python内置函数及功能简介汇总

2020/10/13 Python

python实现在列表中查找某个元素的下标示例

2020/11/16 Python

处级干部反四风个人对照检查材料思想汇报

2014/09/27 职场文书

龙潭大峡谷导游词

2015/02/10 职场文书

2015年法制宣传月活动总结

2015/03/26 职场文书

工程款申请报告

2015/05/15 职场文书

2019奶茶店创业计划书范本，值得你借鉴

2019/08/14 职场文书

Nginx服务器添加Systemd自定义服务过程解析

2021/03/31 Servers

详解Javascript实践中的命令模式

2021/05/05 Javascript

详解JSON.parse和JSON.stringify用法

2022/02/18 Javascript

python中mongodb包操作数据库

2022/04/19 Python