【js】Typed.js-文字打印機特效

*Typed.js-文字打印機特效

這次要來說明開頭loading轉場 & typed.js打印機特效，我只會將重點放在typed.js打印機效果部分。
參考網站: github.com/mattboldt/typed.js/

*方式1 >
透過安裝式的(需先載好node.js才能開啟terminal下指令安裝)
這邊對有linux基礎或是用過框架的人而言，下指令應該是不陌生的
npm install typed.js
安裝後會產出一個node_modules資料夾>typed.js
(下面我有錄個短片)

*方式2 >
(1)崁入typed.js的CDN
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>

(2)填入相對應的id標籤

<div class="main text-center" >
<div class="strings-word">
<h1>親愛的棧友好</h1>
<div id="typed-strings" >
<p>哈囉大家好~</p>
<p>晚餐要不要一起去吃滷肉飯?</p>
</div>
<span id="typed"></span>
</div>
</div>
</div>

(3)增加開頭的旋轉圖標

(4)js語法(上方的紅字對應打字機藍字對應開頭轉場)

完整程式碼 >

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
    <style>
    body { background-color: #042f4b; }
    .show-loader  {
        display: flex; /*不換行*/
        justify-content: center;
    }
    .loader {
        position: relative;
        width:100vw;
        height:100vh;
        padding-top: 350px;
        background: #ffffff;
        transform: translate(0px);
        animation: bgchange 1s ease infinite;
    }
    @keyframes bgchange {
        0%{
            transform: translate(0px);
            background: rgba(255, 255, 255, 0.9);
        }
        50%{
            background: rgba(255, 255, 255, 1);
        }
        100%{
            background: rgba(255, 255, 255, 0.9);
        }
    }
    .strings-word {
        font-family: '微軟正黑體';
        font-size: 1.6rem;
        color: #204969;
        background-color: #f7be16;
        margin-top: 30vh;
        padding: 2vh;
    }
    </style>
    <title>typed js打字機</title>
</head>
<body>
    <div class="main text-center" >
              <div class="strings-word">
                    <h1>親愛的棧友好</h1>
                    <div id="typed-strings" >
                            <p>哈囉大家好~</p>
                            <p>晚餐要不要一起去吃滷肉飯?</p>
                    </div>
                    <span id="typed"></span>
                </div>
            </p>
          </div>
     </div>      
     <div class="show-loader">
        <div id="page" class="text-center loader">
            <!-- loading icon旋轉小圖示 -->
            <div id="load"></div>
        </div>
    </div>



   <script> /*打印機*/
    var typed = new Typed('#typed',{
            stringsElement: '#typed-strings', //定義標籤
            backSpeed: 60, //回播速度
            typeSpeed: 30, //打字速度
            startDelay: 3000, //3000毫秒(3秒)後觸發
            loop:true //循環播放
        });
   </script>
   <script> /*開場轉換*/
        document.querySelector('.main').style.display = 'none'; //主內容一開始隱蔽
        document.getElementById('page').classList.add('loader'); //增加loader選擇器
        document.getElementById('load').innerHTML = '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>';//增加小轉圈

        setTimeout(()=>{
            document.querySelector('.main').style.display = 'block'; //主內容固定住
            document.getElementById('page').classList.remove('loader'); //移除loader選擇器
            document.getElementById('load').innerHTML = '';//移除轉圈
        },3000);
    </script>
</body>
</html>