#TypewriterEffect
LightNews LightNews
devmansam.net
I coded a typewriter effect in vanilla js. Here's the repo if anyone wants to fork it and use it in your own projects. Just change the text in the phrases array to whatever you want. Have a great weekend. github.com/DevManSam777...

#100Devs #javascript #typewritereffect #webdev #webdevelopment
February 21, 2025 at 1:04 PM
han05l8.bsky.social
《CSS 打字機效果 - 為文字增添靈魂》

想讓你的標題更有戲劇感？來點打字機效果吧！就像讓文字擁有了生命，一個字一個字蹦出來 ⌨️

這些效果不只能用在標題，還可以用在重要提示、歡迎語等場景。記住，動畫要有意義，不是為了炫技！

專業提示：考慮使用 Web Animation API 來實現更複雜的打字效果，能獲得更好的控制性。

#前端開發 #CSS #TypewriterEffect #動畫特效
/* 基礎打字機效果 */ .typewriter { overflow: hidden; white-space: nowrap; border-right: 2px solid #000; animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; width: fit-content; } /* 打字動畫 */ @keyframes typing { from { width: 0 } to { width: 100% } } /* 光標閃爍 */ @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: #000 } } /* 進階多行打字效果 */ .multiline-typewriter { display: inline-block; overflow: hidden; position: relative; } .multiline-typewriter::after { content: ''; position: absolute; right: 0; top: 0; height: 100%; width: 2px; background: #000; animation: blink-caret 0.75s step-end infinite; } /* 文字漸現效果 */ .fade-in-text { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.5s ease forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
December 6, 2024 at 2:11 PM
gigglyguineapig.bsky.social
This tutorial includes:
🔸Create TypewriterEffect script
🔸Use .maxVisibleCharacters to reveal text
🔸Delay next character on punctuation
🔸Implement skip: speed up or jump to end
🔸Invoke events per character & on complete

Hope you'll enjoy it!
June 26, 2025 at 1:06 PM
gigglyguineapig.bsky.social
This tutorial includes:
🔸Create TypewriterEffect script
🔸Use .maxVisibleCharacters to reveal text
🔸Delay next character on punctuation
🔸Implement skip: speed up or jump to end
🔸Invoke events per character & on complete

Hope you'll enjoy it!
April 3, 2025 at 1:06 PM