- wowjs可以在網(wǎng)頁(yè)滾動(dòng)時(shí), 展示css動(dòng)畫,是animater的好朋友, wowjs官方實(shí)例演示鏈接: https://mynameismatthieu.com/WOW/
animate.css 包含了一組炫酷末盔、有趣、跨瀏覽器的動(dòng)畫贯涎，可以在你的項(xiàng)目中直接使用偷仿。
使用方法
1. 在頁(yè)面頭部引入, animate.css和wow.js, cdn地址如下:
<link rel="stylesheet">
<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
2. 在需要添加動(dòng)畫的html元素上, 新增兩個(gè)類屬性, 第一個(gè)為wow, 第二個(gè)為動(dòng)畫名如從左側(cè)滑入slideInLeft
<p class="wow slideInLeft">從左邊滑入的動(dòng)畫</p>
3. 添加動(dòng)畫控制, 主要控制四個(gè)屬性:
- data-wow-duration: 動(dòng)畫持續(xù)時(shí)間
- data-wow-delay: 動(dòng)畫開始之前的延遲播放的時(shí)間
- data-wow-offset: 元素距離底部大于此數(shù)值時(shí),開始播放動(dòng)畫
- data-wow-iteration: 動(dòng)畫重復(fù)的次數(shù)
<!--動(dòng)畫持續(xù)時(shí)間為2秒, 動(dòng)畫開始之前的延遲播放的時(shí)間為5s 元素底部距離瀏覽器底部400像素時(shí)開始播放動(dòng)畫, 動(dòng)畫重復(fù)次數(shù)為2次-->
<p class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="400" data-wow-iteration="2">從左邊滑入的動(dòng)畫</p>
4. 在html底部添加初始化語(yǔ)句
<script>
wow = new WOW(
{
boxClass: 'wow', // 默認(rèn)屬性名
animateClass: 'animated', // 默認(rèn)觸發(fā)的動(dòng)畫類(包含在animate css中)
offset: 0, // 為所有添加wow的元素設(shè)置 data-wow-delay屬性 的默認(rèn)值
mobile: true, // 是否在移動(dòng)設(shè)備中開啟動(dòng)畫
live: true // 持續(xù)監(jiān)測(cè)頁(yè)面中是否插入新的wow元素
}
);
wow.init();
</script>
小技巧: 在animater中大多數(shù)動(dòng)畫名都是"見名知意"的, 在這里可以在線查看: https://cdn.bootcss.com/animate.css/3.5.2/animate.css, 具體用法可以查看下面簡(jiǎn)單的小demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wow動(dòng)畫</title>
<link rel="stylesheet">
<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
</head>
<style>
p {
font-size: 50px;
text-align: center;
color:#64B587;
line-height: 100px;
}
section {
width: 800px;
font-size: 30px;
color: #A84631;
text-align: center;
line-height:60px;
margin: 0 auto;
}
section div {
height: 100px;
line-height: 100px;
}
</style>
<body>
<p class="wow slideInLeft">
將進(jìn)酒
</p>
<section >
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="1s">
君不見黃河之水天上來(lái)歹河，奔流到海不復(fù)回。<br>
</div>
<div class="wow slideInLeft" data-wow-duration="3s" data-wow-delay="1s">
君不見高堂明鏡悲白發(fā)，朝如青絲暮成雪卤恳。<br>
</div>
<div class="wow bounceOutUp" data-wow-duration="2s" data-wow-delay="1s">
人生得意須盡歡，莫使金樽空對(duì)月寒矿。<br>
</div>
<div class="wow fadeIn">
天生我材必有用突琳，千金散盡還復(fù)來(lái)。<br>
</div>
<div class="wow fadeInDown">
烹羊宰牛且為樂(lè)符相，會(huì)須一飲三百杯拆融。<br>
</div>
<div class="wow fadeInLeft">
岑夫子蠢琳，丹丘生，將進(jìn)酒镜豹，杯莫停傲须。<br>
</div>
<div class="wow fadeInLeftBig">
與君歌一曲，請(qǐng)君為我傾耳聽：<br>
</div>
<div class="wow fadeOutRightBig">
鐘鼓饌玉不足貴趟脂，但愿長(zhǎng)醉不復(fù)醒泰讽。<br>
</div>
<div class="wow flipInX">
古來(lái)圣賢皆寂寞，惟有飲者留其名昔期。<br>
</div>
<div class="wow flipOutY">
陳王昔時(shí)宴平樂(lè)已卸，斗酒十千恣歡謔。<br>
</div>
<div class="wow lightSpeedIn">
主人何為言少錢硼一，徑須沽取對(duì)君酌咬最。<br>
</div>
<div class="wow rotateIn">
五花馬，千金裘欠动，<br>
</div>
<div class="wow rotateInUpLeft">
呼兒將出換美酒永乌，與爾同銷萬(wàn)古愁。<br>
</div>
</section>
<!--動(dòng)畫持續(xù)時(shí)間為2秒, 動(dòng)畫開始之前的延遲播放的時(shí)間為5s 元素底部距離瀏覽器底部400像素時(shí)開始播放動(dòng)畫, 動(dòng)畫重復(fù)次數(shù)為2次-->
<p class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="400" data-wow-iteration="2">End</p>
</body>
<script>
wow = new WOW(
{
boxClass: 'wow', // 默認(rèn)屬性名
animateClass: 'animated', // 默認(rèn)觸發(fā)的動(dòng)畫類(包含在animate css中)
offset: 0, // 為所有添加wow的元素設(shè)置 data-wow-delay屬性 的默認(rèn)值
mobile: true, // 是否在移動(dòng)設(shè)備中開啟動(dòng)畫
live: true // 持續(xù)監(jiān)測(cè)頁(yè)面中是否插入新的wow元素
}
);
wow.init();
</script>
</html>
小結(jié):
animater可以增加網(wǎng)頁(yè)的動(dòng)感效果,動(dòng)畫的效果和ppt類似, 如果你肯花時(shí)間, 用animater做出好看的在線ppt效果也是完全可以做到的~
