鼠标滚动特效很常见,当鼠标滚动到特定的位置时才会触发相应的CSS特效,这里简单聊两款鼠标滚动特效插件smoovejs和wowjs。
smoovejs基于jQuery,所以在引入smoovejs之前确保先引入jQuery,相关版本的smoovejs的cdn可以点击 这里 或者下面的链接查看。
http://www.bootcdn.cn/jquery-smoove/
激活smoovejs如下:
$('.foo').smoove(option);
其中,添加滚动特效的方式有两种:
1. 在标签内使用data-*属性来添加 2. 在脚本中通过`$('.foo').smoove(option)`来添加
以div为例,对应的两种方法的关键代码如下:
1. <div class='foo' data-move-x='100px' data-move-y='100px'>data-*方法</div> <script> $('.foo').smoove({offset:'40%'});//在40%触发 </script> 2. <div class="foo">脚本触发</div> <script> $('.foo').smoove({ offset:'40%', moveX:'100px', moveY:'100px' }); </script>
这里需要注意两点:
1. 使用`$('.foo').smoove(option)`的优先级要高于使用data-*的优先级。 2. 对于data属性要使用驼峰命名
上面的只是简单的移动效果,smoovejs还有其他效果选项,这里以表格形式列出,感兴趣的可自行尝试。
Name | Type | Default | Description |
---|---|---|---|
offset | integer or string | 150 | Distance to the bottom of the screen before object glides into view e.g. 10% . |
opacity | integer (0-100) | 0 | The opacity of the object before it comes into view. |
perspective | integer | 1000 | 3D perspective in pixels. |
transformOrigin | string | 50% 50% | Origin of the transform in pixel, percentage or keyword (left, right, top or bottom). |
skewY | angle | none | 2D skew along Y-axis e.g. 90deg . |
move | string | none | 2D move along the X- and the Y-axis e.g. 100px,50% . |
move3d | string | none | 3D move along the X-, Y- and the Z-axis e.g. 10px,10px,10px . |
moveX | string | none | Move the object along its X axis e.g. 10px or 10% . |
moveY | string | none | Move the object along its Y axis e.g. 10px or 10% . |
moveZ | string | none | Move the object along its Z axis e.g. 10px or 10% . |
rotate | string | none | 2D rotation e.g. 90deg . |
rotate3d | string | none | 3D rotation along X-, Y- and Z-axis e.g. 1,1,1,90deg . |
rotateX | string | none | 3D rotation along X-axis e.g. 90deg . |
rotateY | string | none | 3D rotation along Y-axis e.g. 90deg . |
rotateZ | string | none | 3D rotation along Z-axis e.g. 90deg . |
scale | decimal or string | none | 2D scale on X- and Y-axis (x,y) (e.g. 2.5 or 2,0.5 ). |
scale3d | string | none | 3D scale on X-, Y- and Z-axis (x,y,z) (e.g. 2,3,0.5 ). |
scaleX | decimal | none | 2D scale on X-axis. |
scaleY | decimal | none | 2D scale on Y-axis. |
skew | angle | none | 2D skew along X- and the Y-axis (e.g. 90deg,90deg ). |
skewX | angle | none | 2D skew along X-axis e.g. 90deg . |
skewY | angle | none | 2D skew along Y-axis e.g. 90deg . |
wowjs基于animatecss,animatecss是一款css3特效的集成,总共数十种(没有去数,想知道确切数字的可以自行去count~~~)css3特效,在使用的同时打开看看这些特效代码相信对我们有益无害。
相应版本的animatecss和wowjs的cdn可点击下方链接查看。
animatecss: http://www.bootcdn.cn/animate.css/
wowjs: http://www.bootcdn.cn/wow/
在需要滚动特效的元素上添加相应的class即可,如下:
<div class="wow rollIn">wowjs</div>
其中,wow是基础类。同时有3个data属性可以使用, data-wow-duration
、 data-wow-delay
和 data-wow-iteration
,可根据需求自行添加。
然后在脚本中初始化wow对象即可,如下:
new WOW.init();
这里是使用默认配置,也可以根据需要修改默认配置,配置选项如下:
属性/方法 | 类型 | 默认值 | 说明 |
---|---|---|---|
boxClass | 字符串 | ‘wow’ | 需要执行动画的元素的 class |
animateClass | 字符串 | ‘animated’ | animation.css 动画的 class |
offset | 整数 | 0 | 距离可视区域多少开始执行动画 |
mobile | 布尔值 | true | 是否在移动设备上执行动画 |
live | 布尔值 | true | 异步加载的内容是否有效 |
在1.1.0版本中,添加了一个callback属性。详细内容可以在上面给出的链接中查看相关版本的源代码进行查看。
修改配置通过字面量修改即可,如下:
var wow = new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true }); wow.init();
完。
转载请标明作出处
作者:myvin
原文出处: