插件描述：轻量级jQuery插件, 可在元素上实现视差滚动效果
发布时间：2019-1-17 22:51
paroller.js1.44
轻量级 jquery 插件, 可实现视差滚动效果
您可以将其用于具有背景属性的元素或任何其他元素
滚动元素可以移动: 垂直、水平
通过 html 数据 * 属性或 jquery 选项进行操纵
移动就绪
易于使用
使用
初始化paroller.js
1 | $('.my-paroller').paroller(); |
初始化paroller.js并设置属性
1 | $(".my-element").paroller({ factor: 0.5, factorXs: 0.2, factorSm: 0.3, type: 'foreground', direction: 'horizontal' }); |
选择元素并设置属性
1 2 3 4 5 6 7 | <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
1 2 3 4 5 6 7 | //初始化paroller.js并设置所选元素的属性 $(".paroller, [data-paroller-factor]").paroller({ factor: 0.2, // 滚动速度和偏移的乘数，+ - 方向控制的值 factorLg: 0.4, //如果窗口宽度小于1200px，则为滚动速度和偏移的乘数，+ - 方向控制的值 type: 'foreground', //background, foreground 背景，前景 direction: 'horizontal' //vertical, horizontal 垂直水平}); |
设置因子断点
1 2 3 4 5 6 7 8 9 10 11 | //初始化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 垂直，水平}); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 轻量级自适应屏幕弹窗插件(原创)
- 下一个特效： 纯JS图片查看器PhotoViewer(原创)