missrudolf 扒皮:7款jQuery视差和滚动效应插件

来源:百度文库 编辑:偶看新闻 时间:2024/05/02 06:48:37

7款jQuery视差和滚动效应插件

2012-02-15 11:36 | 1243次阅读 | 来源:Smashing Hub 【已有0条评论】发表评论

关键词:jQuery | 作者:曹梦云编译 | 收藏这篇资讯

Parallax这一术语来源于希腊单词parallaxis,原意是改变。在网页设计中,视差效果是一个相对较新的趋势。这一效果已经存在了一段时间,但最近才被广泛应用和讨论。

网页设计中的视差效果或视差滚动是以分层的图像以不同的速度或角度在网页中移动,从而产生一种美妙而有趣的3D错觉为特色的技术。本文收集了一些使用视差效果的网站希望能带给你一些启发和灵感。此效果使得滚动网页成为一种有趣的体验。

这里我们搜集了7个视差和滚动效果插件。

1.jQuery Scroll Path 

这是一个自定义滚动路线的插件。它利用canvas来画直线和弧线,和它一起的还有自定义滚动条。在支持它的浏览器中还能够旋转。

2.Static Background 

这个演示网页来自于jQuery Parallax plugin demo 。下面展示的这个例子叫做静态背景。这个部分有一个比用户滚动条速度稍慢的背景。这是通过改变背景顶端的位置来实现的。

3.Curtain.js 

这个插件让你能够创建一个有多重固定面板并以一种奇妙的效果展开的网页。就像升起一个幕布。你可以用你的键盘替代滚动条或者鼠标滚轮来操作文档。除此之外,还有更多的特性。例如你可以轻松地将一个固定元素或多重元素嵌入在一个面板。

4.Stellar.js 

这是一个给任意滚动元素提供视差滚动效果的插件。

5.scrolldeck 

这是一个提供滚动展示平台的插件,你可以用左/右箭头来改变滑动。

6.Scrollorama 

这是一个让人惊奇的插件。你可以使用转换效果例如钉住,渐变、旋转和放大等等。你还可以做一个实验性的有乐趣的项目。

7.Parallax Slider with jQuery 

当滑动一张图片时,我们会利用视差原理来移动不同的背景,从而创造一些美妙的视角。

原文出自:http://smashinghub.com/7-jquery-parallax-and-scrolling-effect-plugins.htm