CSS圖書館 ? HTML & CSS ? iTyped: 仿文字輸入效果 純 JS 僅 2KB 大小

iTyped: 仿文字輸入效果 純 JS 僅 2KB 大小

發表于: HTML & CSS. 評論
Sponsor

仿文字輸入這個特效很早就有了,比如《制作有吸引力的文字動畫效果-textillate.js》有介紹,然而更輕量更簡單,而且不需要 jQuery 庫的 JS,這里我就推薦 iTyped。簡單實用,Tiny 版只有1.9KB 大小,下面來看看介紹。

插件名稱:iType.js
在線演示:https://ityped.surge.sh/
下載地址:https://github.com/luisvinicius167/ityped

小編認為這個方便之處就是不需要 jQuery 庫以及輕量級,而且使用起來不麻煩。

使用教程

STEP 1 : 引入 ityped.js

<script src="https://unpkg.com/[email protected]"></script>

STEP 2 : HTML 代碼

<span id="ityped"></span>

STEP 3: JS代碼

<script>
ityped.init('#ityped', {
strings:['我是文字一哦', '我是文字二哦', '我是文字3哦', '沒有文字啦。。。'],
startDelay: 200,
loop: true
});
</script>
推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流:結交更多有才華的設計師?請加入UI設計QQ群,與50000名設計師交流設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。

{ 發表評論 }