【精心挑选】六款帮助你实现惊艳视差滚动效果的 jQuery 插件

标签: 帮助 视差滚动 效果 | 发表时间:2012-09-13 09:35 | 作者:梦想天空(山边小溪)
出处:http://www.cnblogs.com/lhb25/

  视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις ( parallaxis),意思是"改变"。在网页设计中,视差滚动(Parallax Scrolling)是当下流行的网页设计技术,通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果。下面是一些运用视差滚动效果的优秀网页案例:

 

 

  相信你非常想知道上面这些网页的精美视差滚动效果是如何实现的,今天这篇文章就和大家分享六款精心挑选的  jQuery 视差滚动效果插件,它们能够帮助你制作出精美的视差滚动效果。

 

Sequence.js

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

 

 

在线演示  下载源码

 

jQuery Scroll Path

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

 

 

在线演示  下载源码

 

Parallax Slider with jQuery

这个视差滚动滑动效果多次在我的博文中出现过,相信关注我博客的朋友一定不会陌生,有非常详细的 制作教程

 

 

在线演示  下载源码

 

jQuery Parallax

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

 

 

在线演示  下载源码

 

Scrollorama

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

 

 

在线演示  下载源码

 

Stellar.js

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

 

 

在线演示  下载源码

 

jParallax

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

 

 

在线演示  下载源码

 

您可能还喜欢

 

 

本文链接: 精心挑选的6款优秀的 jQuery 视差滚动效果插件

编译来源: 梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文链接

相关 [帮助 视差滚动 效果] 推荐:

【精心挑选】六款帮助你实现惊艳视差滚动效果的 jQuery 插件

- - 博客园_梦想天空
  视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις ( parallaxis),意思是"改变". 在网页设计中,视差滚动(Parallax Scrolling)是当下流行的网页设计技术,通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果.

10个关于视差滚动效果的教程和插件

- - 博客园_新闻
近些年来,用户对视觉体验的要求不断提高,而设计师们也开始在网页设计中加入各种特效元素以满足用户的需求. 其中有一种特效的效果很具有吸引力,它就是视差滚动效果. 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,可以带来非常出色的视觉体验. 随着这种炫酷的效果首次在 Nike 2011 年的 Nike Better World 项目中完美展现,如今这种视差滚动效果被越来越多的国外网站所应用,成为 Web 设计的热点趋势.

30个让人兴奋的视差滚动(Parallax Scrolling)效果网站

- - 博客园_首页
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 今天这篇文章就与大家分享30个视差滚动效果的网页设计作品,一起欣赏(以拖动滚动条方式浏览效果更佳). 36个非常有趣的互动网站设计作品范例.

帮助你生成翻页效果的jQuery插件 – bookblock

- - 前端观察
今天我们介绍一个漂亮的jQuery翻页效果插件 – bookblock,使用它可以创建动态的类似书本翻页效果的幻灯. 这个插件依赖于 jQuery++,这个类库是一个jQuery的扩展类库,这里使用了它的swipe事件. 主要html代码如下,生成需要展示的图片内容:. 希望大家喜欢这个插件,如果你有任何问题,请给我们留言,谢谢.

互相帮助

- 威 - 杜然的blog——i'm blinded by blackness
每组动作之间,教练让我休息三四十秒钟的时间,说劳逸结合才能增肌增力. 增肌增力,这四个字听着就让人欢喜,觉得付给教练的钱太值了,连休息都能长肌肉长力气. 在这三四十秒的时间里,我跟教练一般会闲聊. 比如,我说如果北京每年都像今年这样多雨,没准儿以后可以北水南调,挖它三条运河,GDP冲得老高了. 有时候,教练会拿出手机中儿子的照片焦灼地等着我的夸赞——我特别理解新爸爸的心情,所以很配合.

怎样帮助他人(转)

- 阿昌 - 时间堂—GTD学习实践小屋
  我们基本上没有什么办法去帮助他人,即使全能的上帝都没有这个能力. 上帝只帮助那些能够自己帮助自己的人:耶稣也曾对人说过:是你们自己坚定的信心在帮助你,不是我. 因为他人的帮助只能解决一时之急,从长远看来,对一个人并没有什么真正的益处.   对于我们任何一个人,生活中总会有一个当下最根本的矛盾问题.

氮磷钾帮助抑制核辐射

- rIPPER - Solidot
提前四月一的超时空章鱼 写道 "核治愈权威Zombies教授的助手Asshole博士经过对日本沿海水质的对比测试,指出预防辐射最好方法是尽量吸收氮磷钾(Amifostine),连日来的实验数据表明一样中国特色小吃富含氮磷钾,但由于氮磷钾挥发性比较强,不能长期曝露在空气中,所以必须采取直接入口的方式吞食.

SignalGuru帮助司机躲开红灯

- hao - Solidot
MIT和普林斯顿大学的研究人员正在研发一套名叫SignalGuru(PDF)的系统,利用安装在仪表盘的智能手机摄像头网络收集的可视化数据,优化驾驶速度,避开路上的红灯,避免等待,同时减少汽油消耗,因为不时的停车和启动是相当耗油的. SignalGuru已在麻省剑桥和新加坡进行了测试. 在剑桥,交通信号灯是根据固定时间表变化的,因此系统可以以三分之二秒的误差预测红灯在何时亮起,能帮助司机平均减少20%的汽油消耗.

"各种电影对你有帮助

- Frankenstein - Cao Liu
1、缺乏学习动力:《幸福终点站》、《风雨哈佛路》. 2、对爱失望:《偷天情缘》、《初恋50次》. 3、自卑失落:《阿甘正传》、《肖申克的救赎》. 4、失败或绝望:《铁权男人》、《迫在眉梢》、《伊丽莎白镇》. 5、厌倦生活:《在世界的转角遇见爱》、《搏击俱乐部》. 《盗梦空间》、《记忆裂痕》、《生死停留》、《死亡幻觉》、《禁闭岛》、《穆赫兰道》、《蝴蝶效应》、《恐怖游轮》、《伤城》、《盗走达芬奇》、《88分钟》、《万能钥匙》、《决胜21点》、《沉默的羔羊》.

BlindSquare:利用 LBS 数据帮助盲人

- - 爱范儿 · Beats of Bits
最近 Foursquare 积累了数量庞大的真实地理位置数据,它拥有 2000 万名用户以及 20 亿次签到. 这些数据不但可以 帮助商户掘金,还可以帮助盲人导航. iOS 应用 BlindSquare 利用 Open Street Maps 来定位用户的位置,然后通过 Foursquare 的数据找出附近有什么地方,再通过苹果内置的 VoiceOver 或 Acapela Group 提供的文本转声音服务,将地名读出来,好让用户知晓,这样便为盲人创建了一个由语音构成的地图.