iTyped.js - typing effect 文字輸入效果

iType.js 網站：https://ityped.surge.sh/

在iType.js的github中可以找到兩種方式安裝它

Npm: npm install ityped 
CDN: https://unpkg.com/ityped@0.0.10

請依自己喜好選擇

安裝完成後

我們直接由code來解讀

(範例是直接引入cdn)

code

<span class="ityped"></span>
<script>
window.ityped.init(document.querySelector('.ityped'),{
                        strings : ["你的內容"],
                        typeSpeed: 35,
                        showCursor: false
                      });
</script>

直接由ityped.init抓取指定class值，很簡單明瞭吧!

接著來介紹下在{}大括弧中的屬性值

    strings: ['你的內容'],
         此為你的文字內容顯示，比較特別的是你可以使用" , "隔開多個字串，再配合"loop"及"backSpeed"使用，就可以做出最上方示圖效果。
    
    typeSpeed: 55,      //default
        為文字輸入效果速度，預設值為55，數值越小，輸入速度越快，以此類推。
    
    backSpeed: 30,     //default
        為刪除文字速度，預設值為30，比預設之文字輸入速度快，數值調整方式與輸入亦同。比較特別的是，它無法單獨使用，須配合"loop"，才會有刪除效果顯示。

    startDelay: 500,     //default
        為開始輸入延遲，單位毫秒，但第一次不受影響，此用於啟用"loop"時，刪除完成後至再開始輸入之延遲。
    
    backDelay: 500,     //default
        為開始刪除延遲，單位毫秒，用於在輸入完成後之延遲刪除時間。
    
    loop: false,     //default
        為是否循環顯示，特別的是只有加入"loop"而未加入"backSpeed"時，它會自動啟用backSpeed效果，重複輸入刪除。
     
    showCursor: true,     //default
        為是否顯示輸入符號。

    cursorChar: "|",     //default
        為顯示符號選擇，可以設定為任何你喜歡的符號。

    
    onFinished: function(){}
        此項為在輸入完成後執行的function。




(以上皆為實際測試研究，如說明有誤請留言或私訊告知我，感謝 !)