TypeWriting.js

由於最近工作上的案子需要呈現逐字打字的效果,在 google 的結果後決定自己來手刻一個來玩玩,做完之後就再順便改成一個 jQuery plugin 啦~

其實要做出一個逐字出現的 function 不難,javascript 不用十行就可以完成了,css 的部分只是要做出後面游標閃爍的效果。

簡單版 function

(想直接用 plugin 的人可以直接往下滑喔~)

一個簡單的打字 function 這樣就完成囉

第一個參數 target 只是方便在不同地方呼叫時所用,如果只需要使用在一個元素上的話可以直接把 target 換掉;第二個就是帶入需要呈現的句子,這一個版本的 function 句子不能帶 html 語法,像是 <br/> <h1></h1> 這些都不行,解法下面再說。這效果其實就是把帶入的字串一個字一個字切開然後再塞入目標元素中,所以用個變數去記現在切到第幾個字了,最後就是用 setTimeout 去做每個字間隔的效果,150就是間隔,數字越大打字越慢的意思。

剩下的 css 部分:

這邊是用偽元素 ::after 來做到游標閃爍的效果。

接下來講帶入 html 的部分,關於 html 語法我有兩種解法,第一種是邪門歪道XD 因為我輸入的字串都是中文字,所以我在要用到 <br/> 時先用沒出現的字代替,像是 “A” 然後在 function 裡再把 “A” 換回 “<br/>”,譬如說:原本 html 中應該是這樣 「這是第一行<br/>這是第二行」,我先換成 「這是第一行A這是第二行」,然後在 keyIn function 裡第一行再換成

var typingStr = typingString.slice( 0, string_current ).replace( "A", "<br/>" );

把 A 換回去就好,很簡單吧~雖然蠻笨的,但很實用XDD

第二種方式應該就蠻正常的了,在 plugin 裡我就是用這種解法。

用一個全域變數來存 boolean 值,然後在 function 中加入這兩行判斷現在是不是在 html tag 中

if( typingStr.slice(-1) == "<" ) isHtml = true;
if( typingStr.slice(-1) == ">" ) isHtml = true;

如果 isHtml == true 時接下來就不能再使用 setTimeout 來 call function,要直接果斷繼續 call function,直到 isHtml 再度變回 false,這樣在遇到 tag 時就會因為沒有時間延遲而直接顯示出來。也是好方法,但我還是覺得方法一簡單又實用XD 但如果使用方法二的話,我還沒有想到如果字串中有類似 “><” 的解法lol

第二部分 — TypeWriting.js

既然自己手刻一個 function 也用不到十行,那為什麼還要用 plugin 呢?因為用 plugin 你只需要一行RRRRR 而且 css 也不用自己寫喔><

github連結在這,裡面有更詳細的解說

demo page


目前有兩個 function

– typewriting()

– rewrite()

三個參數分別是 打字間隔、游標閃爍的間隔 跟 游標的顏色,後面可以帶個 function 在打完字後執行

$('.string').rewrite( "Another text here", function() {
    console.log("Ya");
});

第二個就是對同一元素重複再做一次輸入的動作

以上~~~~

謝謝收看。

如果 plugin 在使用上有遇到任何問題歡迎提出


Originally published at blog.eddiewen.me on March 30, 2015.