转载

鼠标滚动插件smoovejs和wowjs

前言

鼠标滚动特效很常见,当鼠标滚动到特定的位置时才会触发相应的CSS特效,这里简单聊两款鼠标滚动特效插件smoovejs和wowjs。

smoovejs

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

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-durationdata-wow-delaydata-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

原文出处:

正文到此结束
Loading...