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