Sensitive content

This media may contain sensitive content.

正在加载视频...

视频加载失败

返回首页

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS

wesbos's profile picture

Wes Bos

435,895 subscribers

305,169 次观看 • 1 年前 •via X (Twitter)

NSFW
LIVE

Anya Rossi• Live Now

Private livecam show

11 条评论

jhey ▲🐻🎈 的头像
jhey ▲🐻🎈1 年前

can do it without any JavaScript at all *based on scroll-driven animation support but scrollsnapchanging isn't in Firefox/Safari either

Manish Baghel 的头像
Manish Baghel1 年前

I used to work at Uniqlo in the backend team and no one in the engineering team liked this scroll behavior but for some reason the business team insisted on keeping it. I'll forward your post to the frontend team at Uniqlo hopefully they'll work on it.

Wes Bos 的头像
Wes Bos1 年前

Please do! Love uniqlo, I'm wearing jeans an a shirt RN. love the stores, but the website UX needs a bit of work

QuackSnippets 🦆✂️ 的头像
QuackSnippets 🦆✂️1 年前

Every developer: "scrolljacking is bad" Every developer working on a brand landing page: "but what if we did it just this once...?"

Wes Bos 的头像
Wes Bos1 年前

@Brandon10270824 Developers hate carousels too, but the reality is that people buying stuff, and the marketing department that is fighting for landing page space love them

⚇ 的头像
⚇1 年前

"awful experience" you say, but why would a customer, who is browsing a landing page for new items, want to speed through the page like in your rework? Uniqlo's anchors to the next section on purpose and it would meet the users expectations

Wes Bos 的头像
Wes Bos1 年前

Its not that I want to speed through them, but I want to be able to scroll natively and not be restricted. Try it yourself - very frustrating: Also, I am a uniqlo customer - I was shopping for a shirt while wearing their jeans + sweater and it frustrated me - I'm not just a grumpy dev looking for a reason to make a video

whatnicktweets 的头像
whatnicktweets1 年前

Can watch these all day. Moar papa

Wes Bos 的头像
Wes Bos1 年前

over 200 short vids posted here, but easier to find them all on my tiktok or instagram

Rohil 的头像
Rohil1 年前

Can we get rid of carousel packages (swiper, slick etc...) and just use this to build an image carousel?

Wes Bos 的头像
Wes Bos1 年前

yep! And one of the huge benefits here is that touch is built into scrolling.

相关视频

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.
0:34

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

Soren

184,261 次观看 • 8 个月前

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳
1:14

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳

jhey ʕ•ᴥ•ʔ

59,139 次观看 • 7 个月前

Similar technique 🤙 1. Take a scroll-snap list 2. Apply CSS scroll animations ✨ img { animation: flow; animation-timeline: --cover; } keyframes flow { 0% { transform: translate(-80%, 0) rotateY(-33deg); } } Few lines of CSS make it a progressively enhanced animated list 🔥
0:46

Similar technique 🤙 1. Take a scroll-snap list 2. Apply CSS scroll animations ✨ img { animation: flow; animation-timeline: --cover; } keyframes flow { 0% { transform: translate(-80%, 0) rotateY(-33deg); } } Few lines of CSS make it a progressively enhanced animated list 🔥

jhey ʕ•ᴥ•ʔ

114,209 次观看 • 2 年前

You know that annoying experience on mobile websites where you need to find the little close button and can't swipe a menu closed? The solution is simpler than you think. With basic CSS scroll APIs, you can get built-in interruptible swipe gestures 🥳
0:49

You know that annoying experience on mobile websites where you need to find the little close button and can't swipe a menu closed? The solution is simpler than you think. With basic CSS scroll APIs, you can get built-in interruptible swipe gestures 🥳

Una 🇺🇦

17,386 次观看 • 6 个月前

With the new iOS 17 scroll view APIs, we can create a scroll animation like this with just a few lines of code. For more, check out the video👇
0:32

With the new iOS 17 scroll view APIs, we can create a scroll animation like this with just a few lines of code. For more, check out the video👇

Kavsoft

156,039 次观看 • 2 年前

What’s old is new again 🌀 Learn how to create fluid, responsive scroll-driven animations that give your users engaging, app-like web experiences—with only a few lines of CSS. 🔗
0:48

What’s old is new again 🌀 Learn how to create fluid, responsive scroll-driven animations that give your users engaging, app-like web experiences—with only a few lines of CSS. 🔗

Chrome for Developers

6,844,437 次观看 • 1 年前

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.
0:25

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

112,034 次观看 • 2 年前

View Transitions just learned how to multitask with the rest of the page. Scoped View Transitions let you run multiple, fluid transitions at the same time, all with just a few lines of CSS. Web UX, re-imagined →
1:24

View Transitions just learned how to multitask with the rest of the page. Scoped View Transitions let you run multiple, fluid transitions at the same time, all with just a few lines of CSS. Web UX, re-imagined →

Chrome for Developers

114,560 次观看 • 7 个月前

Proud of the landing page we shipped for Sora with limited time & resources. Give the carousels a whirl using your trackpad or on mobile. Embrace scroll snap points and rip out those third party libraries. 🥳 P.S. Our team is hiring!
0:21

Proud of the landing page we shipped for Sora with limited time & resources. Give the carousels a whirl using your trackpad or on mobile. Embrace scroll snap points and rip out those third party libraries. 🥳 P.S. Our team is hiring!

Thomas Degry

18,834 次观看 • 2 年前

Probably old news now, but the CSS View Transition API is SUPER cool! Entry/exit layout animations like this used to be super complicated or require giant libraries. Now it's like 2 lines of JS, and a few lines of CSS if you want to customize the animation. Amazing! 🤯
0:29

Probably old news now, but the CSS View Transition API is SUPER cool! Entry/exit layout animations like this used to be super complicated or require giant libraries. Now it's like 2 lines of JS, and a few lines of CSS if you want to customize the animation. Amazing! 🤯

Devon Govett

98,021 次观看 • 2 年前

Make your web UI roar-some 🦖 Swap complex JS for just a few lines of CSS to build carousels and bring animations to life. Now available in Chrome and coming soon to other browsers →
0:22

Make your web UI roar-some 🦖 Swap complex JS for just a few lines of CSS to build carousels and bring animations to life. Now available in Chrome and coming soon to other browsers →

Chrome for Developers

43,046 次观看 • 7 个月前

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇
0:27

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

jhey ʕ•ᴥ•ʔ

128,603 次观看 • 7 个月前

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 ⭐️
0:23

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 ⭐️

jhey ʕ•ᴥ•ʔ

136,417 次观看 • 1 年前

💡CSS Tip! Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! 👀 Another cool demo powered by the future of CSS.
0:22

💡CSS Tip! Connecting two circles with an arrow is good, but it's even better if we can calculate and show the distance inside the arrow! 👀 Another cool demo powered by the future of CSS.

CSS by T. Afif

25,687 次观看 • 6 个月前

don't scroll jack. the users scroll should always map 1:1 with the content moving on the page. otherwise it feels like going from a highway to driving through mud. you can still do very cool transitions without jacking scroll (e.g. below)
0:44

don't scroll jack. the users scroll should always map 1:1 with the content moving on the page. otherwise it feels like going from a highway to driving through mud. you can still do very cool transitions without jacking scroll (e.g. below)

ben hylak

35,588 次观看 • 6 天前

negative position: sticky + line height units + background-attachment 👨‍🍳 you can achieve a lot with a good grasp of CSS fundamentals bonus: progressively enhance with scroll-driven animation ✨
0:38

negative position: sticky + line height units + background-attachment 👨‍🍳 you can achieve a lot with a good grasp of CSS fundamentals bonus: progressively enhance with scroll-driven animation ✨

jhey ʕ•ᴥ•ʔ

134,905 次观看 • 1 年前

Make your tooltips and menus stay in view with 3 lines of CSS 🤙 .menu { top: anchor(top); left: anchor(right); position-try-fallbacks: flip-block, flip-inline; } Property updated 📝 Responds to scroll, layout change, etc. Watch 👇 Anchor Positioning is coming 🚀
0:26

Make your tooltips and menus stay in view with 3 lines of CSS 🤙 .menu { top: anchor(top); left: anchor(right); position-try-fallbacks: flip-block, flip-inline; } Property updated 📝 Responds to scroll, layout change, etc. Watch 👇 Anchor Positioning is coming 🚀

jhey ʕ•ᴥ•ʔ

87,991 次观看 • 2 年前

CSS Scroll-Snapping + GSAP ScrollTrigger 🙀 What a lovely combo! I didn't know anything about #css scroll-snapping until studying a recent demo from Julio Rodriguez (linked below). I wanted to build my own simplified version from scratch to understand it better. Notice how the animated list of headers always snap perfectly to "hello" when scrolling stops. Be sure to check out his Craft of UI newsletter if you want to ramp up your CSS! demos and links below 👇
0:29

CSS Scroll-Snapping + GSAP ScrollTrigger 🙀 What a lovely combo! I didn't know anything about #css scroll-snapping until studying a recent demo from Julio Rodriguez (linked below). I wanted to build my own simplified version from scratch to understand it better. Notice how the animated list of headers always snap perfectly to "hello" when scrolling stops. Be sure to check out his Craft of UI newsletter if you want to ramp up your CSS! demos and links below 👇

Carl 💥 Creative Coding Club

29,409 次观看 • 1 年前

🖱 Scrub through a CSS @‍keyframe with an element's scroll position. What do you think of this effect? Is it OK when very subtle?
1:53

🖱 Scrub through a CSS @‍keyframe with an element's scroll position. What do you think of this effect? Is it OK when very subtle?

Wes Bos

44,261 次观看 • 1 年前