Video wird geladen...
Video konnte nicht geladen werden
Pretty fun seeing how you can combine different CSS tricks with scroll 😁 The basic combination of overflow: hidden and steps() animation timing makes this happen ⭐️
136,499 Aufrufe • vor 2 Jahren •via X (Twitter)
10 Kommentare
Jesús Rascónvor 2 Jahren
i kinda love the debug mode better lmao
jhey ▲🐻🎈vor 2 Jahren
Could look pretty cool if the opacity was reduced on the letters outside of the clip. Perhaps it could be updated with an animated mask position 🤔
Tusharvor 2 Jahren
Post tutorial
Retro ✴️vor 2 Jahren
Looks nice but how do screenreaders process this ?
jhey ▲🐻🎈vor 2 Jahren
Very good question ⭐️ The answer is, "fine". The trick here is to duplicate the string of text in a visually hidden <span> then apply [aria-hidden] to all of the animated text you see. That way, the reader will only pick up the string of text as expected 🤙
Nuelvor 2 Jahren
You’re a genius
S4RAHvor 2 Jahren
This is crazy cool
JMvor 2 Jahren
Creative 🎨
Sumitvor 2 Jahren
It would be cool if you can make it like the animation from the matrix movie
Salih Ayvor 2 Jahren
🥹🥹🥹🥹🥹🥹
![CSS Tip! ✨ You can create icon sprite animations using the steps() animation-timing function 🤙 You could use this to create little icon button animations, etc. 😎 But how do you do it? Like this 👇 button img { object-fit: cover; object-position: 0 0; } The image is a sprite strip of the frames in the animation. To animate the frames, you do something like this: [aria-pressed=true] img { animation: play 0.5s steps(20) forwards; } @ keyframes play { to { object-position: 100% 0; } } We are toggling aria-pressed in our scripts to show a pressed state and we can then fire the animation to play our sprite 🎉 Check out the video that breaks things down a little bit CodePen.IO link blow! 👇](https://image.24vids.com/tw-1694442289047703873/ext_tw_video_thumb/1694440593613557760/pu/img/OB1gtiLZhnylcC9e.jpg)
