失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > jQuery教学-简单好用的视差滚动特效Parallax Effect

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

时间:2021-01-14 02:46:36

相关推荐

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视差滚动特效]

原文:/js/9082.html

如果觉得《jQuery教学-简单好用的视差滚动特效Parallax Effect》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。