this post was submitted on 15 Jul 2023
11 points (100.0% liked)

WebDev

1151 readers
4 users here now

Community for all things Web Development related.

founded 1 year ago
MODERATORS
postman
11
CSS Multi-line Typing Effect Generator (codepen.io)
submitted 1 year ago by owenfromcanada to c/webdev
4 comments fedilink hide all child comments
 

So I figured I'd try my hand at a bit of CSS to create a typing effect. I started from this one, but I wanted to expand it to multi-line, so I did. Turns out there's a lot of manual timing work, so it's tedious to change. But with a little JS... I made a generator—make some for yourself!

you are viewing a single comment's thread
view the rest of the comments
[–] trainline 2 points 1 year ago (1 children)

Wow, I did not even know CSS would let you animate typing

[–] owenfromcanada 2 points 1 year ago (1 children)

I didn't either, before I looked it up. Apparently CSS lets you do an animation in "steps" instead of continuous movement. Then it's just applying that to the width of a div, and it creates the effect (along with alternating the transparency of the right border for the cursor).

[–] trainline 2 points 1 year ago

Thanks for the explanation!