jQuery滚动视觉差插件paroller.js1.44

插件特效

2026-07-25 22:53 2 次浏览 • 0 次下载 10.7KB

插件描述：轻量级jQuery插件, 可在元素上实现视差滚动效果

发布时间：2019-1-17 22:51

paroller.js1.44

轻量级 jquery 插件, 可实现视差滚动效果
您可以将其用于具有背景属性的元素或任何其他元素
滚动元素可以移动: 垂直、水平
通过 html 数据 * 属性或 jquery 选项进行操纵
移动就绪
易于使用

使用

初始化paroller.js

1	`$('.my-paroller').paroller();`

初始化paroller.js并设置属性

$(".my-element").paroller({ factor: 0.5, factorXs: 0.2, factorSm: 0.3, type: 'foreground', direction: 'horizontal' });

选择元素并设置属性

<div class="my-paroller" 
    data-paroller-factor="0.4" 
    data-paroller-factor-xs="0.2" 
    data-paroller-factor-sm="0.3" 
    data-paroller-type="foreground" 
    data-paroller-direction="horizontal"
>

选择元素

1	`<div` `class="my-element"></div>`

选项

数据属性

您可以通过data-paroller- *或jQuery值来控制视差效果。

data-paroller-*	jQuery	value	default value
data-paroller-factor	factor	number (+/-)	0
data-paroller-factor-xs	factorXs	number (+/-)	0
data-paroller-factor-sm	factorSm	number (+/-)	0
data-paroller-factor-md	factorMd	number (+/-)	0
data-paroller-factor-lg	factorLg	number (+/-)	0
data-paroller-type	type	background, foreground	background
data-paroller-direction	direction	vertical, horizontal	vertical

data-paroller-factor

设置元素在滚动时的视差效果的速度和距离。值可以是正（0.3）或负（-0.3）。减少意味着更慢。不同的符号（+/-）表示不同的方向（up/down, left/right）。

data-paroller-factor-*

设置所选断点的参数系数。

	data-paroller-factor-*	jQuery option	window width breakpoint
Extra small	data-paroller-factor-xs	factorXs	<576px
Small	data-paroller-factor-sm	factorSm	<=768px
Medium	data-paroller-factor-md	factorMd	<=1024px
Large	data-paroller-factor-lg	factorLg	<=1200px
Extra Large	data-paroller-factor-xl	factorxl	<=1920px

JavaScript

//初始化paroller.js并设置所选元素的属性 
$(".paroller, [data-paroller-factor]").paroller({  
  factor: 0.2,            // 滚动速度和偏移的乘数，+  - 方向控制的值
  factorLg: 0.4,          //如果窗口宽度小于1200px，则为滚动速度和偏移的乘数，+  - 方向控制的值
  type: 'foreground',     //background, foreground   背景，前景 
  direction: 'horizontal' //vertical, horizontal 垂直水平
});

设置因子断点

//初始化paroller.js并设置所选元素的属性
$(".paroller, [data-paroller-factor]").paroller({  
     factor: 0.3,            //+/-，如果没有设置其他断点因子，则选择此值 
     factorXs: 0.1,          // factorXs, factorSm, factorMd, factorLg, factorXl      
     factorSm: 0.2,          // factorXs, factorSm, factorMd, factorLg, factorXl      
     factorMd: 0.3,          // factorXs, factorSm, factorMd, factorLg, factorXl      
     factorLg: 0.4,          // factorXs, factorSm, factorMd, factorLg, factorXl
     factorXl: 0.5   // factorXs, factorSm, factorMd, factorLg, factorXl
     type: 'foreground',     // background, foreground  背景，前景
     direction: 'horizontal' // vertical, horizontal  垂直，水平
});