转载

鼠标滚动插件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-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

原文出处：

正文到此结束

所属分类：编程技术

本文标签： description key 需求 CDN 代码 js 移动设备 Word ip CSS http tab IDE ECS jquery dist 配置插件
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

鼠标滚动插件smoovejs和wowjs

前言

smoovejs

wowjs

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流