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

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

На главную

Scroll masking with CSS scroll animation as a progressive enhancement ⭐️ .scroller { animation: mask-up; animation-timeline: scroll(self); animation-range: 0 1rem; mask-composite: exclude; } @​keyframes mask-up { to { mask-size: 100% 120px, 100% 100%; } }

573,010 просмотров • 2 лет назад •via X (Twitter)

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

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

A refresh of this previous demo going through different scroll styles 🤙 (Video compression on that one 🙃) These little details become real fun to create with some of the new stuff we're getting on the <platform> 💯

Фото профиля Nicu Barbaros
Nicu Barbaros2 лет назад

How do you make that GUI for config?

Фото профиля ‎‎ dev
‎‎ dev2 лет назад

man.. did you memorized entire mdn web docs? 😂

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

Haha - Feels like it sometimes 😅

Фото профиля rose :3
rose :32 лет назад

super small thing, but personally i think i'd prefer if the scrollbar itself wasn't getting masked,, i feel like it'd be more cohesive

Фото профиля Mario Souto - DevSoutinho
Mario Souto - DevSoutinho2 лет назад

How to you record the videos? 👀

Фото профиля AlexIsMaking
AlexIsMaking2 лет назад

Yes! This would also be a really cool effect to apply to an automatically scrolling list of items e.g. quotes 👀

Фото профиля Derrick
Derrick2 лет назад

Have you done a video for the blur effect on the scroll?

Фото профиля ƨergey
ƨergey2 лет назад

Could you share a codepen plz?

Фото профиля eeee
eeee2 лет назад

@readwise save thread

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