碼上快樂

相關內容    簡體    繁體

想實現前端酷炫的打字機一樣的效果嗎？

本文轉載自   查看原文   2021-10-18 09:27   1358    前端小知識

實現酷炫的打字機效果插件typed.js

前言：

最近在寫前端項目的過程中，在逛別人的優質的個人博客的時候，發現一個好玩有趣的東西。看下圖，類似在打字的效果，然后又在思考的感覺，感覺整個網頁都充滿了思想。於是我就去百度這種效果怎么實現。
有很多原生的實現辦法，但幾乎都是js在操作Dom元素，但是我是在vue項目上編寫的，顯然不妥。這個時候發現了typed.js，他會在vue使用的時候多封裝了一層，使得不是操作dom。現在分享下這個插件。在這里插入圖片描述

一、typed.js的介紹

typed.js是一個類型化庫，效果是用打字機的方式顯示一段話，可以自定義任何字符串、指定顯示速度、指定是否循環等

如下圖官方（作者）演示。

在這里插入圖片描述
其實可以使用原生JS來實現這個效果，但是還是很麻煩的
typed.js是一個輕量級的JavaScript插件, 用於實現頁面文字的打字動畫效果
這是一款輕量級，使用簡單，功能強大的插件。

二、typed.js的使用

1. 環境准備

  1. 在原生html中

只需要引入CDN

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

  1. 在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 &nbsp;until&nbsp; 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

在這里插入圖片描述

點個贊再走吧~~~~


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 css3 實現打字機效果 JS實現打字機效果 cocos creator 實現打字機的效果 unity實現文本打字機效果(支持富文本) js實現打字機效果（完整實例） Unity 逐字顯示 打字機效果 Unity UGUI打字機效果 Unity開發筆記-UGUI Text通過修改頂點顏色實現打字機效果 VUE——使用easy-typer-js實現打字機效果 css3線條圍繞跑馬+jquery打字機效果
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM