轻量级页面滚动视觉差特效jquery插件

当前位置:主页 > jQuery库 > 视觉差滚动效果 > 轻量级页面滚动视觉差特效jquery插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
轻量级页面滚动视觉差特效jquery插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-03-05
    阅读:
简要教程

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>
                
HTML结构

为需要制作视觉差效果的元素指定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。

paroller.js插件的github地址为:https://github.com/tgomilar/paroller.js

网友评论