實作酷炫的打字機效果插件typed.js
前言：
最近在寫前端專案的程序中，在逛別人的優質的個人博客的時候，發現一個好玩有趣的東西，看下圖，類似在打字的效果，然后又在思考的感覺，感覺整個網頁都充滿了思想，于是我就去百度這種效果怎么實作，
有很多原生的實作辦法，但幾乎都是js在操作Dom元素，但是我是在vue專案上撰寫的，顯然不妥，這個時候發現了typed.js，他會在vue使用的時候多封裝了一層，使得不是操作dom，現在分享下這個插件，
一、typed.js的介紹
typed.js是一個型別化庫，效果是用打字機的方式顯示一段話，可以自定義任何字串、指定顯示速度、指定是否回圈等
如下圖官方（作者）演示，
其實可以使用原生JS來實作這個效果，但是還是很麻煩的
typed.js是一個輕量級的JavaScript插件, 用于實作頁面文字的打字影片效果
這是一款輕量級，使用簡單，功能強大的插件，
二、typed.js的使用
1. 環境準備
- 在原生html中
只需要引入CDN
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
- 在vue中
安裝依賴
npm install --save vue-typed-js
2. 使用
原生html
最簡單使用
<body>
<span class="box"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
var typed = new Typed(".box", {
strings: ["歡迎來到我的博客", "你是最棒的"],//輸出的文字
typeSpeed: 200,//打字的速度
});
</script>
效果：
輸入暫停
可以通過轉義字符^1000在字串中間暫停一段時間，
<body>
<span class="box"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
var typed = new Typed(".box", {
//在了后面停頓三秒
strings: ["讓我想一下是誰來看我了^3000", "原來是你呀老鐵"],
typeSpeed: 200,//打字的速度
});
</script>
智能退格
會智能回退到前一句重復的地方
<body>
<span class="box"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
var typed = new Typed(".box", {
//會智能回退到前一句重復的地方
strings: ["我明天想吃面條", "我明天想吃烤冷面",
"我明天什么都想吃"],
typeSpeed: 100,//打字的速度
});
</script>
效果：
改變游標的樣式
通過cursorChar: '_',屬性來改變游標的樣式
批量鍵入
通過轉義字符``來包括需要批量展示的資料或者文字，
會有一段文字不是通過列印出來的，而是突然完整的出現，會有一種提問打字，機器問答的感覺，
<body>
<span class="box"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
var typed = new Typed(".box", {
strings: ["熱愛永遠熱淚盈眶", "只要累不死，就卷死他人",
"未來可期"],
typeSpeed: 100,//打字的速度
smartBackspace: true, // 開啟智能退格 默認false
cursorChar: '?',
backSpeed: 50,//后退速度
backDelay: 500,//后退延遲
loop:true,//是否回圈
startDelay:1000,//起始時間
fadeOut:true,//淡出效果
});
</script>
效果：
靜態 HTML 的字串 （SEO 友好）
可以在頁面上放置HTML div并從中讀取，而不是使用strings陣列來插入字串，這允許機器人、搜索引擎以及禁用JavaScript的用戶，在頁面上查看您的文本，
<body>
<div id="typed-strings">
<p>你像 <strong>天外來物一樣 </strong> 求之不得</p>
<p>你在世俗的名字里, </em><em>不重要了，</em> --薛之謙</p>
</div>
<span id="typed"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
var typed = new Typed('#typed', {
stringsElement: '#typed-strings',
typeSpeed: 200,//打字的速度
});
</script>
效果：
其他常用的屬性
這里我只列舉了我用的多的，還有更多的屬性在文章結尾，
<body>
<span class="box"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
var typed = new Typed(".box", {
strings: ["歡迎來到我的博客", "送你一句話",
"未來可期"],
typeSpeed: 100,//打字的速度
smartBackspace: true, // 開啟智能退格 默認false
backSpeed: 50,//后退速度
backDelay: 500,//后退延遲
loop:false,//是否回圈 默認false
startDelay:1000,//起始時間
fadeOut:true,//淡出效果
});
</script>
效果：
更多屬性看作者的完整檔案
在Vue中使用
前面講了這么多是在原生html中使用的，屬性是相同的，只是使用的時候有點區別，而且該插件在vue中使用多封裝了一層，使得我們不用自己去操作Dom，
在main.js中全域匯入并使用
import Vue from 'vue'
import VueTypedJs from 'vue-typed-js'
Vue.use(VueTypedJs)
用法
要開始使用，只需將vue-typed-js自定義元素添加到template然后傳遞文本，該文本應輸入到strings屬性， 另外，您需要將具有類typing的元素傳遞到插槽，它將用作wrapper ，
最簡單的使用
<template>
<vue-typed-js :strings="['這是我的博客', '我是浪漫主義碼農','歡迎各位大佬來訪']">
<h1 class="typing"></h1>
</vue-typed-js>
</template>
<script>
export default {};
</script>
<style>
</style>
效果：
屬性
直接在vue-typed-js自定義標簽上加屬性就行，全部的屬性如下：
| 屬性 | 型別 | 描述 | 用法 |
|---|---|---|---|
| strings | 陣列 | 要輸入的字串 | :strings="['Text 1', 'Text 2']" |
| stringsElement | 串 | 包含字串子元素的元素的ID | :stringsElement="'myId'" |
| typeSpeed | 數 | 輸入速度(以毫秒為單位) | :typeSpeed="50" |
| startDelay | 數 | 開始輸入之前的時間(以毫秒為單位) | :startDelay="1000" |
| backSpeed | 數 | 退格速度(以毫秒為單位) | :backSpeed="10" |
| smartBackspace | 布爾型 | 僅退格與上一個字串不匹配的內容 | :smartBackspace="true" |
| shuffle | 布爾型 | 洗弦(打亂陳述句的輸出順序) | :shuffle="true" |
| backDelay | 數 | 退格前的時間(以毫秒為單位) | :backDelay="100" |
| fadeOut | 布爾型 | 淡出而不是退格 | :fadeOut="true" |
| fadeOutClass | 串 | 淡入淡出影片CSS類 | :fadeOutClass="'fadeOutClass'" |
| fadeOutDelay | 布爾型 | 淡出延遲(以毫秒為單位) | :fadeOutDelay="true" |
| loop | 布爾型 | 回圈字串 | :loop="true" |
| loopCount | 數 | 回圈次數 | :loopCount="3" |
| showCursor | 布爾型 | 顯示游標 | :showCursor="true" |
| cursorChar | 串 | 游標字符 | :cursorChar="'_'" |
| autoInsertCss | 布爾型 | 將游標CSS插入并將HTML淡出 | :autoInsertCss="true" |
| attr | 串 | 用于輸入Ex的屬性：輸入占位符，值或僅HTML文本 | :attr="'placeholder'" |
| bindInputFocusEvents | 布爾型 | 如果el是文本輸入，則系結到焦點并模糊 | :bindInputFocusEvents="true" |
| contentType | 串 | 純文本格式為“ html”或“ null” | :contentType="'html'" |
最后放一個加了點樣式的打字機吧
<template>
<div>
<vue-typed-js
class="mao"
:strings="[
'這是我的博客<br/>我是浪漫主義碼農<br/>歡迎各位大佬來訪',
'這是我的博客<br/>我是浪漫主義碼農<br/>送大家一句話',
'這是我的博客<br/>我是浪漫主義碼農<br/>博觀而約取,厚積而薄發，<br/><h2>Romantic until death</h2>',
]"
:cursorChar="'?'"
:typeSpeed="100"
:backSpeed="50"
:autoInsertCss="true"
>
<h1 class="typing"></h1>
</vue-typed-js>
</div>
</template>
<script>
export default {};
</script>
<style>
.mao {
position: relative;
left: 35%;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(rgb(255, 255, 0), rgb(0, 255, 255));
-webkit-text-fill-color: transparent;
}
</style>
效果：
三、寫在最后
如果是在其它專案中使用的話：
在ReactJS使用參考
查看此示例在組件中使用Typed.js的React app
在Vue使用參考
在vue中使用typed.js
用作WebComponent
WebComponent:
typed.js作者網站：www.mattboldt.com
點個贊再走吧~~~~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/325605.html
標籤：其他
上一篇：Javascript基礎知識