视差插件paroller.js

jianfly.com 2019-01-31 2166次浏览

视差插件jquery.paroller

使用方法

<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

原文出处:http://www.htmleaf.com/jQuery/shijuecha/201703054385.html