You want a Typewriter effect for your text but you are lost within all the variations that use JS and the ones that use a complex CSS code.
Search...
For further actions, you may consider blocking this person and/or reporting abuse
Oh so that is why nobody actually said yes to the war, a surprise attack!
Unfortunately (for me) this was going to be my solution so I guess I better come up with something silly or clever as this basically ticks all of the sensible options!
p.s. you can't tick "accessible" without the
prefers-reduced-motionMedia query to switch the blink and animations off and just swap the words out!Love it (oh crap, I can't say that in a war can I....errrmm), sorry I meant I hate it! 🤣
This is my secret "speed-of-light" attack. A HIT in less than 24h!
No one can beat this!
So I am thinking I am going to make this fair despite your trickery, I will start easy and do a HTML only version first! 😉
Does this count?
This is going to be a very short war if you keep taking all the fun ideas! This was essentially my second entry so between you both I am now left with pure HTML and a type…righter (and that will be silly!)
So you have ideas, the rest are excuses 😝
I know a way of doing it in pure HTML, but it requires several files. I'm curious about the type-righter 🤔
Dude that was amazing! Never saw a typewriter effect that doesn't rely on monospace fonts!
I'd add (and very clearly highlight) that to your pros list
✔️ Doesn't require monospace fonts
✔️ Can use any font
on the other hand, monospace probably looks more typewriter-like, but technically this feat is still amazing
This is amazing, great work with all the explaining demos! 👏
Thanks 😊 I am waiting to see your ideas now 😋
Did you forget to handle positioning, or is it just me:
add
vertical-align:bottomto them main span to avoid this. It's the baseline alignment that is inconsistent across browser. For the other issue, you have to rectify the height. the 1.2 I used is an approximation that you have to update based on your real font. Each browser/OS has its own default font so the result may not be the same for everyone OR set the line-height equal to height and you won't get the issue.This is exactly what I was looking for! Brilliant <3
@afif may I call first of all?
You are doing amazing things , using only CSS.
Well done please continue
don't worry, I am not planning to stop 👍
I am unable to understand what the issue is with the first letter. Can someone explain this to me?
If I wanted the text to only play once and then pause, how would I code that?