Загрузка видео...

Не удалось загрузить видео

На главную

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,417 просмотров • 1 год назад •via X (Twitter)

Комментарии: 10

Фото профиля Jesús Rascón
Jesús Rascón1 год назад

i kinda love the debug mode better lmao

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈1 год назад

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 🤔

Фото профиля Tushar
Tushar1 год назад

Post tutorial

Фото профиля Retro ✴️
Retro ✴️1 год назад

Looks nice but how do screenreaders process this ?

Фото профиля jhey ▲🐻🎈
jhey ▲🐻🎈1 год назад

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 🤙

Фото профиля Nuel
Nuel1 год назад

You’re a genius

Фото профиля S4RAH
S4RAH1 год назад

This is crazy cool

Фото профиля JM
JM1 год назад

Creative 🎨

Фото профиля Sumit
Sumit1 год назад

It would be cool if you can make it like the animation from the matrix movie

Фото профиля Salih Ay
Salih Ay1 год назад

🥹🥹🥹🥹🥹🥹

Похожие видео

Future CSS Tip! 🍏 You can create this Apple-style photo scroller by combining CSS scroll-driven animations and CSS scroll-snap 😍 Peep those changing captions 👀 No JS! img { animation: highlight both linear; animation-timeline: view(inline); 👈 Horizontal animation-range: cover 0% cover 50%; 👈 Finish } @ keyframes highlight { 50% { translate: 0 0; scale: var(--starting-scale); 👈 props opacity: var(--starting-opacity); 👈 } 100% { translate: 0 0; scale: 1; opacity: 1; } } Without the animation support, you get a standard unordered list containing some s 🤙 How do we swap the captions though? The "trick" is to use position: absolute on the figcaption and animate their opacity based on the ViewTimeline of their parent list item 😎 figcaption { animation: show both linear; animation-timeline: --list-item; } @ keyframes show { 0%, 45%, 55%, 100% { opacity: 0; } 50% { opacity: 1; } } li { view-timeline-name: --list-item; view-timeline-axis: inline; 👈 important! } The parent of the scroll track uses position: relative so all the captions sit in the middle even though they are in the right place for the markup 🙌 The last bit is the scroll-snap 🤙 Not much to it at all. Wrap the list and make it scrollable. Then add scroll-snap-type .wrapper { scroll-snap-type: x mandatory; overflow-x: scroll; } Then make sure each list item has scroll-snap-align set on it li { scroll-snap-align: center; } That's it! Pretty cool demo to put together and see how to do this stuff with these APIs 🤓 A lot of cool little tricks to pick up for writing your CSS! ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

232,131 просмотров • 2 лет назад

CSS Tip! 📜 You can use scroll-driven animations to progressively enhance collapsing a floating call to action 🤏 .cta { animation: shrink; animation-timeline: scroll(); animation-range: 0 100px; } @​keyframes shrink { to { width: 48px; } } That's the gist of it. Use the body scroll position with animation-timeline: scroll(). Define the animation-range as when you have scrolled 100px. There's a little more though 🤓 That would "scrub" the width animation. Ideally, you want to trigger that animation. You could animate a custom property with steps() timing and use that to define the width ✨ @​property --scrub { syntax: ' '; inherits: true; initial-value: 0; } body { animation: scrub both steps(1, end); animation-timeline: scroll(); animation-range: 0 100px; } Then transition the --scrub property on the CTA and use it for the width 🤙 .cta { transition: --scrub 0.2s; width: calc(48px + (120px * (1 - (var(--scrub) / 100)))); } Other animations are a matter of preference and timing. For example, you could then make the hand wave, scale down the size, and then slide a gradient across 😉 They have the same structure and technique as the original concept. Waving the hand? 👋 Run it twice, offset the transform-origin. .hand { animation: wave both linear 2; animation-timeline: scroll(); animation-range: 30vh 50vh; transform-origin: 65% 75%; } @​keyframes wave { 50% { rotate: 20deg; } } How's it progressively enhanced? Wrap everything in a @​supports query and a @​media query. If there isn't support, users still get a good experience. It's a floating action button that's circular and already collapsed 🤙 @​supports(animation-timeline: scroll()) { @​media(prefers-reduced-motion: no-preference) {...} } Definitely have a play with the code. Amazing what we're going to be able to do with CSS alone! 🔥 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

177,781 просмотров • 2 лет назад