若 各位有在注意Firefox OS的朋友,应该会发现到,在台湾的官网中,有一个相当特别的效果,当滚动画面时,感觉画面上叠了一层图层,可在某一个区块中,把背景固定住,然后内容不 断的更换,当这个单元介绍完后,再向下滚动卷轴时,下个单元的内容则会向上推,把上一个单元的内容给覆盖上去,是一个相当特别的视觉新感受,而这个酷炫的 特效也有专有名称,就叫作「视差滚动」特效,只需透过CSS、jQuery套件,就可快速的实现出此效果,而这种效果相当适合拿来介绍产品时使用,且这种 视差滚动特效的模组也相当多,梅干则挑选了一个较简单的,来为各位介绍一下啰! 让你也可快速使用此特效。
视差滚动jQuery Parallax Effect:
外挂名称: Parallax Effect
外挂版本: 1.1.3
外挂下载: 本站下载 (梅干简化过) | 官方下载
Step1
将用到的js外挂放到head标签之间。
Step2
将要滚动的DIV区块,加到body标签之间。
Step3
设定css样式外,再分别设定div滚动区块的水平位置、速度。
Step4
这样就完成啰! 当预览时就会发现到,一种很特别的视觉效果,就像是在滚动图层一样。