动感十足的CSS3鼠标滚轮滚动插件jQuery Smoove

动感十足的CSS3鼠标滚轮滚动插件jQuery Smoove
插件描述:jQuery Smoove一款非常强大鼠标滚轮滚动效果插件, 很轻松便可实现鼠标滚动的时候页面的内容随着滚动展现绚丽的动感十足的CSS3动画效果。

使用方法

载入JavaScript和CSS文件:

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="dist/jquery.smoove.min.js" ></script>

CSS样式:

.foo, .bar{height:300px;background:blue;margin-bottom:20px;}

DOM结构:

<div class="foo"></div>
<div class="bar" data-move-x="-200px"></div> 

JavaScript调用方式:

//参数可以通过data属性设置, eg: data-move-x相当于moveX
$(".foo, .bar").smoove({
  offset: '15%',
  moveX: '100px',  // 重写.bar的moveX值
  moveY: '100px',
});

参数说明

名称 类型 默认值 说明
offset
integer|string
150
当对象滑动进入屏幕之前距离屏幕底部的距离 eg: 10%
opacity
integer(0-100)
0
当对象滑动进入屏幕之前的透明度
perspective
integer
1000
对象的3D perspective, 单位px
transformOrigin
string
50% 50%
变换的原点, 单位px|%|left|right|top|bottom
skewY
angle
none
沿Y轴的2D倾斜度 eg: 90deg
move
string
none
沿X轴和Y轴2D移动的距离 eg: 100px,50%
move3d
string
none
沿X轴、Y轴和Z轴3D移动的距离 eg.10px,10px,10px
moveX
string
none
沿X轴移动对象 eg: 10px or 10%
moveY
string
none
沿Y轴移动对象 eg: 10px or 10%
moveZ
string
none
沿Z轴移动对象 eg: 10px or 10%
rotate
string
none
2D旋转 eg: 90deg
rotate3d
string
none
沿X轴、Y轴和Z轴的3D旋转 eg: 1,1,1,90deg
rotateX
string
none
沿X轴的3D旋转 eg: 90deg
rotateY
string
none
沿Y轴的3D旋转 eg: 90deg
rotateZ
string
none
沿Z轴的3D旋转 eg: 90deg
scale
decimal|string
none
X轴和Y轴方向上的2D缩放 (x,y) eg: 2.5 or 2,0.5
scale3d
string
none
沿X轴、Y轴和Z轴方向上的3D缩放 (x,y,z) eg: 2,3,0.5
scaleX
decimal
none
X轴方向上的缩放
scaleY
decimal
none
Y轴方向上的缩放
skew
angle
none
沿X轴和Y轴方向上的2D倾斜 eg: 90deg,90deg
skewX
angle
none
沿X轴方向上的2D倾斜 eg: 90deg
skewY
angle
none
沿Y轴方向上的2D倾斜 eg: 90deg