正在加载视频...

视频加载失败

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

相关视频