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

305,384 просмотров • 1 год назад •via X (Twitter)

Комментарии: 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.

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

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 ʕ•ᴥ•ʔ

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