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

所属分类:UI-滚动

 25304  354  查看评论 (1)
分享到微信朋友圈
X
jQuery滚动视觉差插件paroller.js1.44 ie兼容10

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

paroller.js1.44

  • 轻量级 jquery 插件, 可实现视差滚动效果

  • 您可以将其用于具有背景属性的元素或任何其他元素

  • 滚动元素可以移动: 垂直、水平

  • 通过 html 数据 * 属性或 jquery 选项进行操纵

  • 移动就绪

  • 易于使用

使用

初始化paroller.js

$('.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"
>

选择元素

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

选项

数据属性

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

data-paroller-*jQueryvaluedefault value
data-paroller-factorfactornumber (+/-)0
data-paroller-factor-xsfactorXsnumber (+/-)0
data-paroller-factor-smfactorSmnumber (+/-)0
data-paroller-factor-mdfactorMdnumber (+/-)0
data-paroller-factor-lgfactorLgnumber (+/-)0
data-paroller-typetypebackground, foregroundbackground
data-paroller-directiondirectionvertical, horizontalvertical

data-paroller-factor

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

data-paroller-factor-*

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


data-paroller-factor-*jQuery optionwindow width breakpoint
Extra smalldata-paroller-factor-xsfactorXs<576px
Smalldata-paroller-factor-smfactorSm<=768px
Mediumdata-paroller-factor-mdfactorMd<=1024px
Largedata-paroller-factor-lgfactorLg<=1200px
Extra Largedata-paroller-factor-xlfactorxl<=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  垂直,水平
});
相关插件-滚动

jQuery滚轮控制轮播图上下切换(原创)

jQuery滚轮控制轮播图上下切换,简单实用
  滚动
 39596  341

视觉滚动差效果

纯css3写的滚动视差效果
  滚动
 31845  357

jQuery简单的文字跑马灯特效

这是一款非常简单的jQuery文字跑马灯特效插件。该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动。
  滚动
 213794  358

双向垂直上下滚动

垂直滚动插件,可切换向上或向下方向滚动。
  滚动
 47551  375

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ?╊?σν? м? 0
    2020/12/22 17:32:07
    滚动会抖动什么问题 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复