JavaScript和Vue分別實現(xiàn)逐字彈出(打字機)效果
特別注意:盒子為行內(nèi)塊及行內(nèi)元素時光標同行顯示,塊級元素時為換行顯示
一、CSS實現(xiàn)
- 相關(guān)公式:字體大小*動畫步數(shù)=盒子總寬
- 動畫forwards屬性為停止在結(jié)束位置,替換為infinite則為無限循環(huán)動畫
- 光標使用偽元素實現(xiàn),通過opacity屬性+動畫實現(xiàn)光標閃爍效果
代碼注釋詳解
<style> @keyframes ballText { 0% { width: 0; } 100% { width: 360px; } } @keyframes symbolInput { 0% { opacity: 0; } 100% { opacity: 1; } } .ballText { width: 0; font-size: 30px; /* 強制文本一行顯示 */ white-space: nowrap; /* 移除部分隱藏,模擬視覺彈出效果 */ overflow: hidden; /* background-color: aqua; */ /* 動畫效果 共4秒分12步,每一步的寬度為字體的大?。▽挾龋?,停止在結(jié)束位置 */ animation: ballText 3s steps(12) forwards; /* 替換為infinite則為無限循環(huán)動畫 */ /* 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">測試打字機效果!</div> </body>
二、JS實現(xiàn)
常規(guī)使用及注意事項
- 注意:盒子為塊級元素時,光標換行顯示;盒子為行內(nèi)塊或行內(nèi)元素時,光標與文字同行顯示
- 多個盒子同類名時,只有第一個盒子生效,后面的盒子不生效
- 第一個參數(shù)為盒子,第二個參數(shù)為配置對象
- 第一個參數(shù)類名、id名、標簽名均可(盡量以id或唯一類名為參)
- 第二個參數(shù)為配置對象,可以設(shè)置速度、光標、循環(huán)等,其他用法可以參考typed.js官網(wǎng)自行擴展。
- 需要先引入再使用,
<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: ["測試打字機效果!", "第二段文字效果!", "繼續(xù)測試一段文字"],//輸出的文字 //打字的速度。單位ms typeSpeed: 200, //設(shè)置是否循環(huán),為true,開啟循環(huán) loop: true, //打印開始前的延遲時間 startDelay: 0, //打印結(jié)束后的延遲時間 backDelay: 2000, //設(shè)置打字機是否顯示光標,為true,顯示光標 showCursor: true, }); </script> </html>
多行顯示、換行、回退
- 在span標簽內(nèi)加入
white-space: pre-wrap
樣式,在strings內(nèi)的語句中加入\n換行符
可以實現(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> // 實現(xiàn)多行打印 var typed = new Typed("#ballText", { // 打印完成^1000之前的文字后停頓,單位毫秒 strings: [ "測試打字機效果!\n^1000測試換行效果!\n^1000測試多行效果", "第二段文字效果,\n^1000測試換行效果!\n^1000測試多行效果", "繼續(xù)測試一段文字,\n^1000測試換行效果!\n^1000測試多行效果" ], // 打字速度 typeSpeed: 100, // 退格速度 backSpeed:200 }); </script> </html>
三、VUE實現(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實例 typed = new Typed(typewriterElement.value, { strings: ["Hello, world!", "How are you?"], // 打字速度 typeSpeed: 40, // 退格速度 backSpeed: 20, // 是否循環(huán) loop: true, }); }); // 在組件卸載時銷毀 typed.js 實例 onUnmounted(() => { if (typed) { typed.destroy(); typed = null; } }); </script>
以上就是JavaScript和Vue分別實現(xiàn)逐字彈出(打字機)效果的詳細內(nèi)容,更多關(guān)于JavaScript Vue打字機的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS設(shè)置cookie、讀取cookie、刪除cookie
Js操作Cookie總結(jié)(設(shè)置,讀取,刪除),工作中經(jīng)常會用到的哦!下面是詳細代碼,如有錯誤,請留言指正!2015-04-04layui左側(cè)菜單欄鼠標懸停顯示菜單文字功能實現(xiàn)
layui封裝的左側(cè)菜單是固定寬度的,且左側(cè)菜單欄在css里改變寬度,效果并不是很好(還設(shè)計頭部菜單欄),如果寫js來讓菜單欄能夠拉伸,也比較麻煩,那怎么最簡單的,讓用戶看到菜單的文字呢,下面給大家分享layui左側(cè)菜單欄鼠標懸停顯示菜單文字功能實現(xiàn),感興趣的朋友一起看看吧2024-06-06uniapp幾行代碼解決滾動穿透問題(項目實戰(zhàn))
這篇文章主要介紹了uniapp幾行代碼解決滾動穿透問題,本文結(jié)合實例代碼給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01JS使用單鏈表統(tǒng)計英語單詞出現(xiàn)次數(shù)
這篇文章主要為大家詳細介紹了JS使用單鏈表統(tǒng)計英語單詞出現(xiàn)次數(shù)的相關(guān)資料,列出所有單詞及其出現(xiàn)次數(shù),感興趣的小伙伴們可以參考一下2016-06-06JavaScript代碼性能優(yōu)化總結(jié)(推薦)
下面小編就為大家?guī)硪黄狫avaScript代碼性能優(yōu)化總結(jié)(推薦)。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考,一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-05-05