WOW.js - 让页面滚动更有趣。

官网: https://www.delac.io/wow/

GitHub: https://github.com/matthieua/WOW

BootCDN: https://cdn.bootcss.com/wow/1.1.2/wow.js

ps : IE6/7 等老版本的浏览器不支持 CSS3 动画，建议使用新版本的浏览器。

使用教程

  1. wow.js 是依赖于animate.css，记得要先引入animate.css。

animate官网：https://daneden.github.io/animate.css/


<head>
	<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css">
</head>
  1. 引入wow.js相关的JS包，并且初始化

<script src="https://cdn.bootcss.com/wow/1.1.2/wow.js"></script>
<script>
	// wow.js 初始化
	new WOW().init();
</script>

如需要自定义配置，参照官方的配置如下：

// 1. boxClass：需要执行动画的className，默认 wow
// 2. animateClass：animation.css 动画的 className，默认 animated
// 3. offset：距离可视区域多少开始执行动画，默认 0
// 4. mobile：是否在移动设备上执行动画，默认 true
// 5. live：异步加载的内容是否有效，默认 true
// 6. callback：每次动画启动时都会触发回调函数，参数为正在执行动画的DOM节点
// 7. scrollContainer：可选滚动容器选择器，否则使用window

var wow = new WOW({
    boxClass: 'wow', 
    animateClass: 'animated', 
    offset: 0, 
    mobile: true, 
    live: true, 
    callback: function (box) {
        
    },
    scrollContainer: null
});
wow.init();
  1. 在DOM节点上使用

<div 
	class="wow fadeIn" 
	data-wow-duration="2s" 
	data-wow-delay="2s" 
	data-wow-offset="5"  
	data-wow-iteration="5">
</div>
  • wowclass类名是必须添加的
  • fadeIn 是 animate 的动画样式名
  • data-wow-duration：动画持续时间
  • data-wow-delay：动画延迟时间
  • data-wow-offset：元素的偏移值
  • data-wow-iteration：动画执行次数

PS：两个class类名是必写的，data属性是可写可不写看情况而定。

  1. 推荐一个全屏滚动的插件fullpage.js

官网：https://alvarotrigo.com/fullPage/zh/#page1

以上就是全部教程，欢迎大家交流学习。