快捷導(dǎo)航

JavaScript和Vue分別實(shí)現(xiàn)逐字彈出(打字機(jī))效果

更新時(shí)間：2024年01月10日 10:49:09 作者：加油樂

這篇文章主要為大家詳細(xì)介紹了如何通過CSS、JavaScript和Vue分別實(shí)現(xiàn)逐字彈出(打字機(jī))效果,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下

一、CSS實(shí)現(xiàn)

相關(guān)公式：字體大小*動(dòng)畫步數(shù)=盒子總寬
動(dòng)畫forwards屬性為停止在結(jié)束位置，替換為infinite則為無限循環(huán)動(dòng)畫
光標(biāo)使用偽元素實(shí)現(xiàn)，通過opacity屬性+動(dòng)畫實(shí)現(xiàn)光標(biāo)閃爍效果

代碼注釋詳解

<style>
    @keyframes ballText {
        0% {
            width: 0;
        }

        100% {
            width: 360px;
        }
    }

    @keyframes symbolInput {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    .ballText {
        width: 0;
        font-size: 30px;
        /* 強(qiáng)制文本一行顯示 */
        white-space: nowrap;
        /* 移除部分隱藏，模擬視覺彈出效果 */
        overflow: hidden;
        /* background-color: aqua; */
        /* 動(dòng)畫效果   共4秒分12步，每一步的寬度為字體的大?。▽挾龋?，停止在結(jié)束位置 */
        animation: ballText 3s steps(12) forwards;
        /* 替換為infinite則為無限循環(huán)動(dòng)畫 */
        /* animation: ballText 4s steps(12) infinite; */
    }

    .ballText::after {
        content: "|";
        display: inline-block;
        width: 0;
        height: 100%;
        animation: symbolInput  1s infinite;
    }
</style>
<body>
    <div class="ballText">測(cè)試打字機(jī)效果！</div>
</body>

二、JS實(shí)現(xiàn)

常規(guī)使用及注意事項(xiàng)

注意：盒子為塊級(jí)元素時(shí)，光標(biāo)換行顯示；盒子為行內(nèi)塊或行內(nèi)元素時(shí)，光標(biāo)與文字同行顯示
多個(gè)盒子同類名時(shí)，只有第一個(gè)盒子生效，后面的盒子不生效
第一個(gè)參數(shù)為盒子，第二個(gè)參數(shù)為配置對(duì)象
第一個(gè)參數(shù)類名、id名、標(biāo)簽名均可（盡量以id或唯一類名為參）
第二個(gè)參數(shù)為配置對(duì)象,可以設(shè)置速度、光標(biāo)、循環(huán)等，其他用法可以參考typed.js官網(wǎng)自行擴(kuò)展。
需要先引入再使用，<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

常規(guī)使用效果圖例

代碼注釋詳解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 1.引入typed.js -->
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<body>
    <!-- 2.定義盒子 -->
    <div class="ballText"></div>
</body>
<script>
    // 3.設(shè)置typed.js相關(guān)屬性
    var typed = new Typed(".ballText", {
        strings: ["測(cè)試打字機(jī)效果！", "第二段文字效果！", "繼續(xù)測(cè)試一段文字"],//輸出的文字
        //打字的速度。單位ms
        typeSpeed: 200,
        //設(shè)置是否循環(huán)，為true，開啟循環(huán)
        loop: true,
        //打印開始前的延遲時(shí)間
        startDelay: 0,
        //打印結(jié)束后的延遲時(shí)間
        backDelay: 2000,
        //設(shè)置打字機(jī)是否顯示光標(biāo)，為true，顯示光標(biāo)
        showCursor: true,
    });
</script>
</html>

多行顯示、換行、回退

在span標(biāo)簽內(nèi)加入 white-space: pre-wrap 樣式，在strings內(nèi)的語句中加入\n換行符可以實(shí)現(xiàn)換行
^1000：打印完成^1000之前的文字后停頓，單位毫秒
backSpeed控制回退退格速度，不寫此屬性即為不退格

多行顯示及換行效果圖例

多行顯示及換行代碼注釋詳解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<body>
    <span id="ballText" style="white-space: pre-wrap;line-height: 30px;"></span>
</body>
<script>
    // 實(shí)現(xiàn)多行打印
    var typed = new Typed("#ballText", {
        // 打印完成^1000之前的文字后停頓，單位毫秒
        strings: [
            "測(cè)試打字機(jī)效果！\n^1000測(cè)試換行效果！\n^1000測(cè)試多行效果",
            "第二段文字效果,\n^1000測(cè)試換行效果！\n^1000測(cè)試多行效果",
            "繼續(xù)測(cè)試一段文字,\n^1000測(cè)試換行效果！\n^1000測(cè)試多行效果"
        ],
        // 打字速度
        typeSpeed: 100,
        // 退格速度
        backSpeed:200
    });
</script>
</html>

三、VUE實(shí)現(xiàn)（v2/v3通用）

1、下載命令

npm install typed.js

或者

yarn add typed.js

2、頁面使用

其他屬性及使用方法與原生同理，不做過多演示

效果圖例

代碼注釋詳解

<template>
  <div class="box">
    <div ref="typewriterElement"></div>
  </div>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import Typed from "typed.js";
const typewriterElement = ref(null);
let typed = null;
onMounted(() => {
  // 初始化typed.js實(shí)例
  typed = new Typed(typewriterElement.value, {
    strings: ["Hello, world!", "How are you?"],
    // 打字速度
    typeSpeed: 40,
    // 退格速度
    backSpeed: 20,
    // 是否循環(huán)
    loop: true,
  });
});
// 在組件卸載時(shí)銷毀 typed.js 實(shí)例
onUnmounted(() => {
  if (typed) {
    typed.destroy();
    typed = null;
  }
});
</script>

以上就是JavaScript和Vue分別實(shí)現(xiàn)逐字彈出(打字機(jī))效果的詳細(xì)內(nèi)容，更多關(guān)于JavaScript Vue打字機(jī)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: