打造流暢動態文字展示——typed.js

一、typed.js是什麼？

Typed.js 是一個輕量級的、易於使用的JavaScript庫，它可以讓你為自己的網頁和應用程序增加流暢且自然的動態文字展示效果。既可以自動執行，也可以由用戶觸發，是在使文本內容更加生動的過程中的一種很好的解決方案。

二、typed.js的安裝與使用

1、直接通過下載安裝，或通過聲明script標籤和CDN鏈接來使用typed.js。代碼如下：

<script src="path/to/your/typed.js"></script>

//或

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>

2、在需要添加動態效果的元素中用Span標籤將文字包起來，並指定data-typed屬性值為該段文字。代碼如下：

<span class="typed-text" data-typed="Awesome text"></span>

3、調用typed.js並進行必要配置，代碼如下：

<script>
var options = {
    strings: ['Some awesome text', 'Some other awesome text'],
    loop: true,
    typeSpeed: 50
}

var typed = new Typed('.typed-text', options);
</script>

三、typed.js的一些基本功能介紹

1、速度

typed.js的typeSpeed參數可以控制文字的打印速度，單位是毫秒。還可以設置backSpeed，即文字刪除速度。替換的文字可以使用deleteSpeed控制刪除速度。

2、循環打印

設置loop為true，則typed.js將持續循環打印。與此相應的，還可以設置並控制開始、結束的延遲時間loopDelay、loopCount。

3、光標形狀、速度

滿足用戶個性化需求，typed.js還支持自定義光標形狀和打印速度。可以在options中指定相關參數。

4、回調函數

typed.js還支持回調函數，如完成函數onComplete，在所有文字打印完成後執行，也可以執行所有回調函數，包括完成、刪除等。

四、typed.js案例分析

1、typed.js實現動態樹狀結構

將樹結構數據作為一個二維數組傳給typed.js，利用setTimeout、callbacks和遞歸等編程技巧，從而實現動態展示樹狀結構。代碼如下：

var data = [
    ['A', 'B', 'C'],
    ['D', 'E'],
    ['F', 'G', 'H', 'I'],
    ['J', 'K']
]

var typed = new Typed('.tree-text', {
    strings: data,
    typeSpeed: 100,
    onComplete: function(){
        setTimeout(function(){
            typed.reset();
        }, 10000)
    }
})

2、typed.js實現打字機效果

網頁中有一個典型的動態文字展示場景就是打字機效果。利用typed.js，我們可以使這個效果更加生動且自然。代碼如下：

var typed = new Typed('.typewriter-text', {
    strings: ['Hello, World!', 'It\'s a beautiful day today.'],
    typeSpeed: 100,
    backSpeed: 50,
    loop: true
})

3、typed.js實現背景文字輪播

將背景圖作為一個滿屏div的background，利用typed.js設置該background中的文字展示效果，實現背景文字輪播效果。代碼如下：

.typed-background{
    height: 100vh;
    width: 100vw;
    background: url(./background.jpg);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
}

var typed = new Typed('.typed-background', {
    strings: ['Beautiful background', 'Amazing scenery'],
    typeSpeed: 100,
    backSpeed: 50,
    loop: true
})

五、總結

Typed.js是一個方便易用的JavaScript庫，可以讓網頁和應用程序的文字內容更加生動自然，增加用戶的體驗。通過學習和實踐typed.js能夠幫助我們更好的開發和實現動態文字展示效果。