视差（Parallax）是指从不同的点看一个物体时形成的视觉差异，这个名词是源自希腊文的παράλλαξις (parallaxis)，意思是”改变”。在网页设计中，视差滚动（Parallax Scrolling）是当下流行的网页设计技术，通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果。
相信你非常想知道上面这些网页的精美视差滚动效果是如何实现的，今天这篇文章就和大家分享六款精心挑选的 jQuery 视差滚动效果插件，它们能够帮助你制作出精美的视差滚动效果。

Sequence.js

Sequence 是一款非常优秀的 jQuery 滑动插件，能实现多种精美的滑动效果，其中之一就是水平方向的视差滚动。

Demo – 下载源代码

Parallax Slider with jQuery

Demo – 下载源代码

jQuery Scroll Path

这款插件用于实现自定义路径的滚动效果。可以显示使用 Canvas 绘制路径线条和弧形，看到非常形象的运动效果。

Demo – 下载源代码

jQuery Parallax

这款 jQuery 插件实现了类似 Nikebetterworld.com 产品展示页面的视差滚动效果，代码托管在 Github 上面。

Demo – 下载源代码

Scrollorama

这款 jQuery 插件能够帮助你实现非常酷的滚动效果，可以应用飞入、缩放、淡入淡出等多种过渡效果。

Demo – 下载源代码

Stellar.js

正如它的口号所说：实现视差滚动效果从未如此容易，的确，它能帮助轻松的实现网页视差滚动效果。

Demo – 下载源代码

jParallax

这款基于 jQuery 的视差滚动插件使用简单，官方提供了五种不同的效果演示。

Demo – 下载源代码

转载请注明来源：Web前端(W3Cways.com) - Web前端学习之路 » 分享七款视差滚动效果的jQuery 插件

分享七款视差滚动效果的jQuery 插件的更多相关文章

  1. 20 个用于处理页面滚动效果的 jQuery 插件

    对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...

  2. 16个最棒的jQuery视差滚动效果教程

    今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...

  3. 使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

    www.gbtags.com 使用javascript开发的视差滚动效果的云彩 阅读全文:使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

  4. 使用javascript开发的视差滚动效果的云彩

    在线演示 jquery.parallax.js是一款能够帮助你快速开发视差效果的jQuery插件,在这里我们使用它来开发一款漂亮的云朵视差效果. 主要代码: Javascript ........ 阅 ...

  5. css实现视差滚动效果

    今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使 ...

  6. [Swift通天遁地]九、拔剑吧-(13)创建页面的景深视差滚动效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  7. [Swift通天遁地]九、拔剑吧-(14)创建更美观的景深视差滚动效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. 推荐15款创建漂亮幻灯片的 jQuery 插件

    对于设计师,开发者,摄影师或任何创造性的个人和企业,他们自己的网站是展示他们的技能和服务的最佳场所.你可能打算设计一个新的个人作品网站,不管你是从头开始或使用模板,都会需要使用 jQuery 幻灯片插 ...

  9. Stickup – 轻松实现元素固定效果的 jQuery 插件

    粘贴是一个简单的 jQuery 插件,在页面滚动的时候固定一个元素到浏览器窗口的顶部,让其总是保持在视图中可见.这个插件作用于多页的网站,但是对于单页的布局有额外的功能.借助 CSS,还可以实现当前视 ...

随机推荐

  1. 写个 Hello World 而已，要不要这么震撼？！

    Atom 编辑器的一个插件,可以让你写代码的时候体验狂拽酷炫的效果! 如果来点音乐.再配上机械键盘的话,写代码是不是爽到爆呢? 这货全名叫: activate-power-mode atom pack ...

  2. 聊聊动画引擎 pop

    iOS可以通过CADisplayLink实现自定义动画引擎,pop就是基于此实现的,而且比原生Core Animation更强大好用.譬如当ViewController侧滑返回的时候,系统会将Core ...

  3. Android5.0之CardView的使用

    CardView也是一个非常炫酷的控件,一般我们将CardView配合RecyclerView来使用,当然,CardView也可以配合ListView来使用,都是可以的.OK,我们先来看一张CardV ...

  4. magento 常用方法集锦

    1,获得store的配置变量 Mage::getStoreConfig('sectionname/groupname/fields'); 1 Mage::getStoreConfig('section ...

  5. MD5Untils加密工具类

    package com.dzq.utils; import java.math.BigInteger; import java.security.MessageDigest; import java. ...

  6. Installation error INSTALL_FAILED_VERSION_DOWNGRADE错误

    最近折腾了一下Robotium自动化测试框架,发现问题还挺多,刚刚解决了一个问题,总算是把环境搞定了,可是一运行测试用例,发现又报Installation error INSTALL_FAILED_V ...

  7. Android 讯飞语音之语音合成（在线有声朗读）

    原文:http://www.cnblogs.com/scetopcsa/p/3845427.html 在线语音合成的使用方法: 首先下载相关的sdk,这个网址里有多种版本,我选择的Android. h ...

  8. c#简体繁体转换

     方法一已经亲测,使用正常,方法二貌似不能用. 方法一 /// <summary> /// 中文字符工具类 /// </summary> public static class ...

  9. Win7/Win8.1预订升级Win10失败临时解决方案

    很多Win7/Win8.1用户在今天凌晨通过微软官方推送的方式升级Win10,但这一过程中遇到了“安装失败”等问题,导致升级无法进行.鉴于这种情况,很多用户选择进入Windows10预下载安装文件夹打 ...

  10. Oracle在表上建立自增字段的方法

    本方法为使用SEQUENCE(序列)   例如有表temp_test结构为: create table TEMP_TEST ( id number, nm varchar(10), primary k ...