素材牛

jQuery滚动视觉差插件paroller.js(1.44版本)

 所属分类:网页特效-UI效果/布局,滚动/拖拽

 浏览:328次-  下载:1次-  评论:0次-  发布时间:2019-01-18
jQuery滚动视觉差插件paroller.js(1.44版本)兼容IE10
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述:轻量级视觉差jQuery插件, 可在元素上实现视差滚动效果
 标签:视觉差滚动

详细介绍

paroller.js

  • 轻量级 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-* 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  垂直,水平
});

文件目录结构

  • assets
    • ┝ main.js
    • ┝ style.css
  • dist
    • ┝ jquery.paroller.js
    • ┝ jquery.paroller.min.js
  • ┝ index.html

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:1
所需牛币:5 开始下载

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证