jQuery教学－简单好用的视差滚动特效Parallax Effect

若各位有在注意Firefox OS的朋友，应该会发现到，在台湾的官网中，有一个相当特别的效果，当滚动画面时，感觉画面上叠了一层图层，可在某一个区块中，把背景固定住，然后内容不断的更换，当这个单元介绍完后，再向下滚动卷轴时，下个单元的内容则会向上推，把上一个单元的内容给覆盖上去，是一个相当特别的视觉新感受，而这个酷炫的特效也有专有名称，就叫作「视差滚动」特效，只需透过CSS、jQuery套件，就可快速的实现出此效果，而这种效果相当适合拿来介绍产品时使用，且这种视差滚动特效的模组也相当多，梅干则挑选了一个较简单的，来为各位介绍一下啰！让你也可快速使用此特效。

视差滚动jQuery Parallax Effect：

外挂名称： Parallax Effect
外挂版本： 1.1.3
外挂下载： 本站下载 (梅干简化过) | 官方下载

Step1
将用到的js外挂放到head标签之间。

Step2
将要滚动的DIV区块，加到body标签之间。

Step3
设定css样式外，再分别设定div滚动区块的水平位置、速度。

Step4
这样就完成啰! 当预览时就会发现到，一种很特别的视觉效果，就像是在滚动图层一样。

[范例预览] | [Firefox OS视差滚动特效]

原文：http://www.minwt.com/js/9082.html

jQuery教学－简单好用的视差滚动特效Parallax Effect相关推荐

Sequence.js 实现带有视差滚动特效的图片滑块
Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...
html轮播图水平传送带,这10个教科书级的网页，帮你搞明白视差滚动特效
在视差滚动网页的设计上,无论是移动端还是桌面端,如今的设计师都有了足够深入的探索,并且对于功能和体验上的挖掘,都有了比较成熟的经验.无论是导航悬停式的滚动还是水平滚动和分屏3D特效,视差滚动这一设计趋 ...
基于html5海贼王单页视差滚动特效
分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览源码下载实现的代码: <div class="top"><d ...
30个让人兴奋的视差滚动（Parallax Scrolling）效果网站
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站转载于:https://www.cnblogs.com/momomo/archive/2012/03/02/2377683.h ...
视差滚动（Parallax Scrolling）技术在网页中应用的精美案例
视差滚动(Parallax Scrolling)是一种独特的网页内容表现形式,其基本原理是让多层背景以不同的速度移动,形成立体的运动效果,带来出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站 ...
让人兴奋的视差滚动（Parallax Scrolling）效果网站分享
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术.今天这篇文章就与大 ...
美！视差滚动特效在图片滑块中的应用【附源码下载】
视差滚动(Parallax Scrolling)已经被广泛应用于网页设计中,这种技术能够让原本平面的网页界面产生动感的立体效果.下面分享的这个图片滑块效果是难得一见的结合视差滚动的例子,之前的文章给大 ...
推荐六款帮助你实现惊艳视差滚动效果的 jQuery 插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是"改变".在网页设计中,视差滚动(Pa ...
jquery实现的视差滚动教程(视差大背景效果)
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术.现在越来越多的网 ...

jQuery教学－简单好用的视差滚动特效Parallax Effect

jQuery教学－简单好用的视差滚动特效Parallax Effect相关推荐

最新文章

热门文章