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

使用EXT实现无刷新动态调用股票信息

Nov 01 Javascript

不用写JS也能使用EXTJS视频演示

Dec 29 Javascript

利用jQuery接受和处理xml数据的代码(.net)

Mar 28 Javascript

JavaScript通过RegExp实现客户端验证处理程序

May 07 Javascript

js实现横向伸展开的二级导航菜单代码

Aug 28 Javascript

基于 Node.js 实现前后端分离

Apr 23 Javascript

浅谈JavaScript中小数和大整数的精度丢失

May 31 Javascript

关于ES6的六个小特性（二）

Feb 20 Javascript

微信小程序模板和模块化用法实例分析

Nov 28 Javascript

javascript使用正则实现去掉字符串前面的所有0

Jul 23 Javascript

微信小程序开发实现消息推送

Nov 18 Javascript

vue脚手架项目创建步骤详解

Mar 02 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

显示程序执行时间php函数代码

2013/08/29 PHP

PHP使用pear实现mail发送功能 windows环境下配置pear

2016/04/15 PHP

非常实用的php验证码类

2016/05/15 PHP

Javascript学习笔记 delete运算符

2011/09/13 Javascript

JavaScript执行效率与性能提升方案

2012/12/21 Javascript

Json序列化和反序列化方法解析

2013/12/19 Javascript

常见浏览器多长时间会提示“脚本运行时间过长”总结

2014/04/29 Javascript

Jquery 实现图片轮换

2015/01/28 Javascript

jQuery插件slider实现拖动滑块选取价格范围

2015/04/30 Javascript

javascript设计模式之对象工厂函数与构造函数详解

2015/07/30 Javascript

整理Javascript流程控制语句学习笔记

2015/11/29 Javascript

Web安全测试之XSS实例讲解

2016/08/15 Javascript

Flask中获取小程序Request数据的两种方法

2017/05/12 Javascript

JavaScript实现离开页面前提示功能【附jQuery实现方法】

2017/09/26 jQuery

node通过npm写一个cli命令行工具

2017/10/12 Javascript

javascript实现文本框标签验证的实例代码

2018/10/14 Javascript

深入浅析vue-cli@3.0 使用及配置说明

2019/05/08 Javascript

vue引入微信sdk 实现分享朋友圈获取地理位置功能

2019/07/04 Javascript

JS表格的动态操作完整示例

2020/01/13 Javascript

[07:39]第一届亚洲邀请赛回顾视频

2017/02/14 DOTA

Python中__new__与__init__方法的区别详解

2015/05/04 Python

python验证码识别的实例详解

2016/09/09 Python

python中os模块详解

2016/10/14 Python

Python3网络爬虫之使用User Agent和代理IP隐藏身份

2017/11/23 Python

Python实现Dijkstra算法

2018/10/17 Python

使用Python进行防病毒免杀解析

2019/12/13 Python

python实现单机五子棋

2020/08/28 Python

python中scrapy处理项目数据的实例分析

2020/11/22 Python

1688平价精选商城：阿里集团旗下，工厂出厂价格直销

2017/04/24 全球购物

韩国美国时尚服装和美容在线全球市场：KOODING

2018/11/07 全球购物

印度首个本地在线平台：nearbuy

2019/03/28 全球购物

计算机专业毕业生的自我评价

2013/11/18 职场文书

现金会计岗位职责

2013/12/05 职场文书

草房子读书笔记

2015/06/29 职场文书

python基础入门之字典和集合

2021/06/13 Python

分享3个非常实用的 Python 模块

2022/03/03 Python