轻量级页面滚动视觉差特效jquery插件-爱编程

来源：htmleaf 阅读：11 时间：2018-02-04 01:34

paroller.js是一款轻量级的页面滚动视觉差特效jquery插件。该jquery插件可以在页面滚动时，使指定的图片元素产生炫酷的视觉差效果。

可以通过bower来安装该插件。

bower install paroller.js

在页面中引入jquery和jquery.paroller.js文件。。

<script src="path/to/js/jquery.min.js"></script>
<script src="path/to/js/jquery.paroller.min.js"></script>

为需要制作视觉差效果的元素指定data-*属性。

<div data-paroller-factor="-0.1" 
     data-paroller-type="foreground"
     data-paroller-direction="horizontal"
>

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该jquery视觉差插件。

$(window).paroller();

或在初始化时指定参数：

$(window).paroller({ factor: '0.5', type: 'foreground', direction: 'horizontal' });

data-*参数	默认值	描述
data-paroller-factor	0	设置元素的偏移和速度。值在0.3到-0.3之间。
data-paroller-type	background	背景元素还是前景元素：background, foreground。
data-paroller-direction	vertical	视觉差的方向：vertical, horizontal。