內容簡介
Jupa Typed Text 外掛提供一個可輸入多行文字的區塊，透過逼真的打字機動畫效果呈現。使用者可以輕鬆調整打字速度、顏色及字型，並在動畫結束時執行自定義 JavaScript 函數，增強網站的互動性。
【主要功能】
• 支援多行文字的逐行打字動畫
• 可調整打字速度與延遲時間
• 可選擇閃爍游標與循環播放
• 完成後可執行自定義 JavaScript 函數
• 完整的顏色與字型控制
• 每個區塊自動生成唯一 ID
外掛標籤
開發者團隊
原文外掛簡介
Jupa Typed Text adds a block that types out one or more lines of text with a realistic typewriter animation, powered by Typed.js. Each line is a regular paragraph block, so you can format text, add links, or use any inline formatting the editor already supports.
Simple and easy to use straight from the block inserter, with no configuration required to get started, yet fully customizable when you need it: typing speed, delays, cursor, looping, colors, typography, and even a callback for when the animation finishes.
📺 Watch the video tutorial on YouTube.
Features
Types through multiple lines in sequence, each one a normal paragraph block inside the editor.
Configurable typing speed, backspacing speed, start delay, and delay before repeating.
Toggle the blinking cursor, looping, smart backspace, and shuffle (random line order).
onComplete callback: run a custom JavaScript function (window.typed.onComplete.yourFunctionName) once the animation finishes.
Full color support (text, background, links) and typography controls (font size, line height) from the block sidebar, no custom CSS required.
Each block instance gets a unique ID automatically, so duplicating or pasting the block never causes ID collisions.
Usage
Insert the “Typed Text” block from the inserter.
Write one or more lines of text; each paragraph inside the block becomes a line in the animation.
Open the block sidebar to adjust typing speed, delays, cursor, loop, smart backspace, and shuffle.
Optionally, set a function name under “Callbacks > On complete” and define window.typed.onComplete.yourFunctionName in your theme or plugin JavaScript to run code when the animation finishes.
Source Code
This plugin’s build/ directory contains a minified/compiled JavaScript bundle generated with @wordpress/scripts (webpack). The human-readable source is included in the src/ directory of this plugin, and is also publicly available at:
https://github.com/jupa8712/jupa-typed-text
To regenerate the build/ files from source: npm install && npm run build.
Third-party libraries
Typed.js v3.0.0 — MIT License, Copyright (c) Matt Boldt. Bundled into build/view.js via the build step; source available at the link above.
