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

jQuery教学-简单好用的视差滚动特效Parallax Effect_第1张图片

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


视差滚动jQuery Parallax Effect:

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

Step1
将用到的js外挂放到head标签之间。
jQuery教学-简单好用的视差滚动特效Parallax Effect_第2张图片


Step2
将要滚​​动的DIV区块,加到body标签之间。
jQuery教学-简单好用的视差滚动特效Parallax Effect_第3张图片


Step3
设定css样式外,再分别设定div滚动区块的水平位置、速度。
jQuery教学-简单好用的视差滚动特效Parallax Effect_第4张图片


Step4
这样就完成啰! 当预览时就会发现到,一种很特别的视觉效果,就像是在滚动图层一样。
jQuery教学-简单好用的视差滚动特效Parallax Effect_第5张图片


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

 

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

 

你可能感兴趣的:(jquery)