讓css3動畫變得有趣wowjs

木子昭發表於2018-07-25
CSSS3動畫JS

animate.css 包含了一組炫酷、有趣、跨瀏覽器的動畫，可以在你的專案中直接使用。

使用方法

1. 在頁面頭部引入, animate.css和wow.js, cdn地址如下:

<link href=”https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css” rel=”stylesheet”>
<script src=”https://cdn.bootcss.com/wow/1.1.2/wow.min.js”></script>

2. 在需要新增動畫的html元素上, 新增兩個類屬性, 第一個為wow, 第二個為動畫名如從左側滑入slideInLeft

<p class=”wow slideInLeft”>從左邊滑入的動畫</p>

3. 新增動畫控制, 主要控制四個屬性:

  • data-wow-duration: 動畫持續時間
  • data-wow-delay: 動畫開始之前的延遲播放的時間
  • data-wow-offset: 元素距離底部大於此數值時,開始播放動畫
  • data-wow-iteration: 動畫重複的次數
<!--動畫持續時間為2秒, 動畫開始之前的延遲播放的時間為5s 元素底部距離瀏覽器底部400畫素時開始播放動畫, 動畫重複次數為2次-->
<p class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="400" data-wow-iteration="2">從左邊滑入的動畫</p>

4. 在html底部新增初始化語句

<script>
    wow = new WOW(
        {
            boxClass: `wow`,      // 預設屬性名
            animateClass: `animated`, // 預設觸發的動畫類(包含在animate css中)
            offset: 0,          // 為所有新增wow的元素設定 data-wow-delay屬性 的預設值
            mobile: true,       // 是否在移動裝置中開啟動畫
            live: true        // 持續監測頁面中是否插入新的wow元素
        }
    );
    wow.init();
</script>

小技巧: 在animater中大多數動畫名都是”見名知意”的, 在這裡可以線上檢視: https://cdn.bootcss.com/animate.css/3.5.2/animate.css, 具體用法可以檢視下面簡單的小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wow動畫</title>
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" 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">
    將進酒
</p>

<section >
    <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="1s">
        君不見黃河之水天上來，奔流到海不復回。<br>
    </div>
    <div class="wow slideInLeft" data-wow-duration="3s" data-wow-delay="1s">
        君不見高堂明鏡悲白髮，朝如青絲暮成雪。<br>
    </div>
    <div class="wow bounceOutUp" data-wow-duration="2s" data-wow-delay="1s">
        人生得意須盡歡，莫使金樽空對月。<br>
    </div>
    <div class="wow fadeIn">
        天生我材必有用，千金散盡還復來。<br>
    </div>
    <div class="wow fadeInDown">
        烹羊宰牛且為樂，會須一飲三百杯。<br>
    </div>
    <div class="wow fadeInLeft">
        岑夫子，丹丘生，將進酒，杯莫停。<br>
    </div>
    <div class="wow fadeInLeftBig">
        與君歌一曲，請君為我傾耳聽：<br>
    </div>
    <div class="wow fadeOutRightBig">
        鐘鼓饌玉不足貴，但願長醉不復醒。<br>
    </div>
    <div class="wow flipInX">
        古來聖賢皆寂寞，惟有飲者留其名。<br>
    </div>

    <div class="wow flipOutY">
        陳王昔時宴平樂，斗酒十千恣歡謔。<br>
    </div>
    <div class="wow lightSpeedIn">
        主人何為言少錢，徑須沽取對君酌。<br>
    </div>
    <div class="wow rotateIn">
        五花馬，千金裘，<br>
    </div>
    <div class="wow rotateInUpLeft">
        呼兒將出換美酒，與爾同銷萬古愁。<br>
    </div>
</section>
<!--動畫持續時間為2秒, 動畫開始之前的延遲播放的時間為5s 元素底部距離瀏覽器底部400畫素時開始播放動畫, 動畫重複次數為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`,      // 預設屬性名
            animateClass: `animated`, // 預設觸發的動畫類(包含在animate css中)
            offset: 0,          // 為所有新增wow的元素設定 data-wow-delay屬性 的預設值
            mobile: true,       // 是否在移動裝置中開啟動畫
            live: true        // 持續監測頁面中是否插入新的wow元素
        }
    );
    wow.init();
</script>
</html>

小結:

animater可以增加網頁的動感效果,動畫的效果和ppt類似, 如果你肯花時間, 用animater做出好看的線上ppt效果也是完全可以做到的~


相關文章