saparallax.js是一款可以为任何元素制作视觉差效果的jQuey插件。该视觉差插件通过自定义元素的滚动速度,使背景元素和前景元素在页面滚动时产生视觉差特效。
使用方法
在页面中引入jquery和saparallax.js文件。
HTML结构
为你需要慢速滚动的元素添加data-sabglayer
属性。例如为一幅图片制作视觉差效果:
元素居中
如果你通过left: 50%; translate: transformX: -50%
来居中元素,同时又想为该元素制作视觉差效果,可以通过添加下面的data属性来实现:
data-sabglayer="centered"
滚动速度
要创建各种不同的元素滚动速度,你只需要简单的为data-sabglayer
属性设置0-2之间的浮点数。0表示元素的速度为正常滚动速度。2表示元素在滚动时静止在页面上。如果数值大于2,那么元素在页面滚动时会向上运动。
需要注意的是,元素居中和设置滚动速度不可以同时使用。当你使用了元素居中时候,元素的滚动速度为正常速度。
saparallax.js滚动视觉差插件的github地址为:https://github.com/justMoritz/saparallax.js。