正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

built-in carousel micro-interactions with css scroll-driven animation 🧑‍🍳 li { view-timeline: --item inline } li::scroll-marker { animation: grow linear both; animation-timeline: --item; } progressive enhancement for drag ↓

jhey ʕ•ᴥ•ʔ

147,599 subscribers

44,038 次观看 • 1 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

27 条评论

jhey ʕ•ᴥ•ʔ 的头像

jhey ʕ•ᴥ•ʔ1 个月前

saw this pattern ↓ nice candidate for css ::scroll-marker + ::scroll-button combined with scroll animation (falls back to <button> 🤙)

Jake Dohm 的头像

Jake Dohm1 个月前

Is there a modern carousel component/framework based on all this new tech??

jhey ʕ•ᴥ•ʔ 的头像

jhey ʕ•ᴥ•ʔ1 个月前

could throw one together 🤙 never sure how much to include 🤔 have a few scroll demos that you can point an agent at too on my site (web component <draggable-scroll>) include: - drag (inertia) - cyclical - markers - buttons - animation no deps 🚀

Steven van Wel 的头像

Steven van Wel1 个月前

ooeee this is wonderful 👨‍🍳

jhey ʕ•ᴥ•ʔ 的头像

jhey ʕ•ᴥ•ʔ1 个月前

some of these new css things are so so useful 👷

Mehdi · Motionary 的头像

Mehdi · Motionary1 个月前

This looks nice 😍

jhey ʕ•ᴥ•ʔ 的头像

jhey ʕ•ᴥ•ʔ1 个月前

thanks! 🙏

Franklin Williams 的头像

Franklin Williams1 个月前

Nice, if CSS Carousels are supported in all major browsers we will be able to build many carousels as we want.

jhey ʕ•ᴥ•ʔ 的头像

jhey ʕ•ᴥ•ʔ1 个月前

all of the carousels! 😅

Franklin Williams 的头像

Franklin Williams1 个月前

10+/10

Chuks Gabriel 的头像

Chuks Gabriel1 个月前

Smooth and clean 👌

jhey ʕ•ᴥ•ʔ 的头像

jhey ʕ•ᴥ•ʔ1 个月前

🙏🙏

Panos 的头像

Panos1 个月前

Is Horizon theme's codebase a masterclass in using CSS over JS that we could point our LLM to and if no, why?

jhey ʕ•ᴥ•ʔ 的头像

jhey ʕ•ᴥ•ʔ1 个月前

erm – it definitely has some cool things in there 💯 depends what you're looking for!

Panos 的头像

Panos1 个月前

Developing a theme now and want to say to AI: "See how the CSS goat is doing it? Do that."

Paul Murray 的头像

Paul Murray1 个月前

wait so this is *not* scroll-snap? RIP scroll-snap?

jhey ʕ•ᴥ•ʔ 的头像

jhey ʕ•ᴥ•ʔ1 个月前

ha - there is still scroll-snapping 🙌 jus' combined with some of the newer things and scroll-padding to get the snap offset 🧐

freddie 的头像

freddie1 个月前

never ceases to amaze

jhey ʕ•ᴥ•ʔ 的头像

jhey ʕ•ᴥ•ʔ1 个月前

tryin' to get back into the groove 🙏

Jan Nicklas 的头像

Jan Nicklas1 个月前

Oh cool! I was working on sth quite similar: and ran into 3 webkit (iOS18-iOS27) and 1 firefox bugs overflow-x: auto animation timeline firefox (nightly)

jhey ʕ•ᴥ•ʔ 的头像

jhey ʕ•ᴥ•ʔ1 个月前

nice! 😎 yeah, this is why i always try to put a fallback in too. thanks for raising those! 🙏 the little detail where the dots scale out at the edges is a fun one to make, right? you kinda think about it like an invisible extended scrollport but with a container unit 🤓

Jan Nicklas 的头像

Jan Nicklas1 个月前

absolutely… the timeline api is genius!

Jake Hawkes 的头像

Jake Hawkes1 个月前

That is sick! It is one of those ‘I don’t know why I like it but it is perfect’, ironically for both user and dev.

Shaun Simpson 的头像

Shaun Simpson1 个月前

This is beautiful

Max 🇺🇦 的头像

Max 🇺🇦1 个月前

You always fascinate me with your css knowledge and creativity. Great one. ☝️

rusa 的头像

rusa1 个月前

scroll-driven animations finally landing natively is the css feature i've wanted for a decade. carousels without a single line of javascript is the dream we kept faking with intersection observers

Dermache Djamel 的头像

Dermache Djamel1 个月前

Simple and beautiful, as usual from you.

相关视频

content wave with CSS scroll animation li { animation: grow both var(--custom-in-out-ease); animation-timeline: view(inline); } @keyframes grow { 50% { width: var(--desired-size); } } bonus javascript for drag to scroll with inertia ✨

content wave with CSS scroll animation li { animation: grow both var(--custom-in-out-ease); animation-timeline: view(inline); } @keyframes grow { 50% { width: var(--desired-size); } } bonus javascript for drag to scroll with inertia ✨

jhey ʕ•ᴥ•ʔ

40,235 次观看 • 1 年前

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @keyframes in { 0% { mask-position: -6ch 0; }}

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @keyframes in { 0% { mask-position: -6ch 0; }}

jhey ʕ•ᴥ•ʔ

126,491 次观看 • 1 年前

CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜 li { animation: bright; animation-range: calc(50% - 1lh) calc(50% + 1lh); animation-timeline: view(); scroll-snap-align: center; } @keyframes bright { 50% { opacity: 1; }}

CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜 li { animation: bright; animation-range: calc(50% - 1lh) calc(50% + 1lh); animation-timeline: view(); scroll-snap-align: center; } @keyframes bright { 50% { opacity: 1; }}

jhey ʕ•ᴥ•ʔ

366,913 次观看 • 1 年前

CSS Tip! 🔮 Use scroll-linked animations to create list animations ✨ li { view-timeline: --i inline; } .card { scale: 0.8; animation-timeline: --i; animation: s; animation-delay:cover 40%; animation-end-delay:cover 60%; } keyframes s { 50% { scale:1; }} CodePen.IO link below!👇

CSS Tip! 🔮 Use scroll-linked animations to create list animations ✨ li { view-timeline: --i inline; } .card { scale: 0.8; animation-timeline: --i; animation: s; animation-delay:cover 40%; animation-end-delay:cover 60%; } keyframes s { 50% { scale:1; }} CodePen.IO link below!👇

jhey ʕ•ᴥ•ʔ

110,306 次观看 • 3 年前

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%; } }

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%; } }

jhey ʕ•ᴥ•ʔ

592,977 次观看 • 2 年前

Scrolling parallax cards with CSS scroll animation 📜 article { scale: 0.8; animation: scale; animation-timeline: view(inline); animation-range: cover 40% cover 60%; } @keyframes scale { 50% { scale: 1; }}

Scrolling parallax cards with CSS scroll animation 📜 article { scale: 0.8; animation: scale; animation-timeline: view(inline); animation-range: cover 40% cover 60%; } @keyframes scale { 50% { scale: 1; }}

jhey ʕ•ᴥ•ʔ

95,676 次观看 • 2 年前

Recreate Github's homepage smooth scroll animation in pure CSS with animation-timeline:

Recreate Github's homepage smooth scroll animation in pure CSS with animation-timeline:

Builder.io

12,138 次观看 • 1 年前

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! 👇

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 次观看 • 3 年前

Not many lines for a CSS parallax effect either 🤙 ul { scroll-padding-inline: calc(50% - var(-card) * 0.5); } img { animation: para; animation-timeline: --item; } @keyframes para { cover 100% { translate: calc(100% - var(--card)) -50%; }}

Not many lines for a CSS parallax effect either 🤙 ul { scroll-padding-inline: calc(50% - var(-card) * 0.5); } img { animation: para; animation-timeline: --item; } @keyframes para { cover 100% { translate: calc(100% - var(--card)) -50%; }}

jhey ʕ•ᴥ•ʔ

274,984 次观看 • 2 年前

Fade elements in and out on scroll in a window with CSS? ✅ ul { scroll-padding-inline: 200px; } article { animation: highlight; animation-timeline: view(inline); } @keyframes highlight { entry 0%, exit 100% { opacity: 0; } entry 100%, exit 0% { opacity: 1; } } cc Adam Wathan

Fade elements in and out on scroll in a window with CSS? ✅ ul { scroll-padding-inline: 200px; } article { animation: highlight; animation-timeline: view(inline); } @keyframes highlight { entry 0%, exit 100% { opacity: 0; } entry 100%, exit 0% { opacity: 1; } } cc Adam Wathan

jhey ʕ•ᴥ•ʔ

222,957 次观看 • 2 年前

those little details™ Scale up and down on scroll with CSS 📜✨ a { animation: scale, scale; animation-direction: normal, reverse; animation-timeline: view(inline); animation-range: entry, exit; } @keyframes scale { 0% { scale: 0; } }

those little details™ Scale up and down on scroll with CSS 📜✨ a { animation: scale, scale; animation-direction: normal, reverse; animation-timeline: view(inline); animation-range: entry, exit; } @keyframes scale { 0% { scale: 0; } }

jhey ʕ•ᴥ•ʔ

246,199 次观看 • 2 年前

CSS only balance sliders 🤙 @keyframes sync { to { --value: 1; }} .slider { animation: sync; animation-timeline: --thumb; } .track { scale: var(--value) 1; } ::-webkit-slider-thumb { view-timeline: --thumb inline; } Scroll-animated input [type=range] in disguise 🥸

CSS only balance sliders 🤙 @keyframes sync { to { --value: 1; }} .slider { animation: sync; animation-timeline: --thumb; } .track { scale: var(--value) 1; } ::-webkit-slider-thumb { view-timeline: --thumb inline; } Scroll-animated input [type=range] in disguise 🥸

jhey ʕ•ᴥ•ʔ

276,038 次观看 • 2 年前

CSS Tip! 🚥 You can create these trending expanding scroll indicators with scroll-driven animations and flex 🤙 .indicator { animation: grow; animation-range: contain calc(50% - var(--size)...; animation-timeline: var(--card); } @keyframes grow { 50% { flex: 3; }} What's the trick? Put the indicators in a container using flex layout and set a width larger than the number of indicators 😉 .indicators { aspect-ratio: 7 / 1; display: flex; } Importantly, set no gap 🤏 To mimic the gap set a transparent border on each indicator and set the background using padding-box .indicator { background: linear-gradient(#fff, #fff) padding-box; border-radius: 50px; border: 4px solid transparent; } Now for the animation. You want to create a view-timeline for each card that moves across 🤙 li:nth-of-type(1) { view-timeline: --one inline; } li:nth-of-type(2) { view-timeline: --two inline; } Make sure they use the inline axis too! The trick is hoisting these view-timeline so the indicators can use them with timeline-scope 👀 .track { timeline-scope: --one, --two, ...; } All that's left is for you to create the animation piece using some calc with the card size ⚡️ .indicator { --size: calc(var(--card-width) * 0.9); animation: grow both linear; animation-range: contain calc(50% - var(--size)) contain calc(50% + var(--size)); } .indicator:nth-of-type(1) { animation-timeline: --one; } .indicator:nth-of-type(2) { animation-timeline: --two; } @keyframes grow { 50% { flex: 3; }} And there you have it, responsive scroll indicators using CSS scroll-driven animations 😎 Sprinkle a little JavaScript to make them clickable and scroll the the right card ✨ const shift = (event) => { if (event.target.tagName === "BUTTON") { const index = [...event.target.parentNode.children].indexOf(event.target); const item = document.querySelector(`li:nth-of-type(${index + 1})`); item.scrollIntoView({ behavior: "smooth", inline: "center" }); } }; As always, any questions or suggestions, let me know. I've put a JavaScript fallback in to use GSAP in browsers that don't have scroll-driven animations 🫶 CodePen.IO link below! 👇

CSS Tip! 🚥 You can create these trending expanding scroll indicators with scroll-driven animations and flex 🤙 .indicator { animation: grow; animation-range: contain calc(50% - var(--size)...; animation-timeline: var(--card); } @keyframes grow { 50% { flex: 3; }} What's the trick? Put the indicators in a container using flex layout and set a width larger than the number of indicators 😉 .indicators { aspect-ratio: 7 / 1; display: flex; } Importantly, set no gap 🤏 To mimic the gap set a transparent border on each indicator and set the background using padding-box .indicator { background: linear-gradient(#fff, #fff) padding-box; border-radius: 50px; border: 4px solid transparent; } Now for the animation. You want to create a view-timeline for each card that moves across 🤙 li:nth-of-type(1) { view-timeline: --one inline; } li:nth-of-type(2) { view-timeline: --two inline; } Make sure they use the inline axis too! The trick is hoisting these view-timeline so the indicators can use them with timeline-scope 👀 .track { timeline-scope: --one, --two, ...; } All that's left is for you to create the animation piece using some calc with the card size ⚡️ .indicator { --size: calc(var(--card-width) * 0.9); animation: grow both linear; animation-range: contain calc(50% - var(--size)) contain calc(50% + var(--size)); } .indicator:nth-of-type(1) { animation-timeline: --one; } .indicator:nth-of-type(2) { animation-timeline: --two; } @keyframes grow { 50% { flex: 3; }} And there you have it, responsive scroll indicators using CSS scroll-driven animations 😎 Sprinkle a little JavaScript to make them clickable and scroll the the right card ✨ const shift = (event) => { if (event.target.tagName === "BUTTON") { const index = [...event.target.parentNode.children].indexOf(event.target); const item = document.querySelector(`li:nth-of-type(${index + 1})`); item.scrollIntoView({ behavior: "smooth", inline: "center" }); } }; As always, any questions or suggestions, let me know. I've put a JavaScript fallback in to use GSAP in browsers that don't have scroll-driven animations 🫶 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

575,728 次观看 • 2 年前

Future CSS Tip! 🔮 Use scroll-driven animation to animate non-ancestor elements w/ timeline-scope 👀 main{ timeline-scope: --a; }👈 hoist! .a{ view-timeline: --a; } .i{ animation: indicate; animation-timeline: --a; } Peep the contact list indicators ✨ CodePen.IO link below! 👇

Future CSS Tip! 🔮 Use scroll-driven animation to animate non-ancestor elements w/ timeline-scope 👀 main{ timeline-scope: --a; }👈 hoist! .a{ view-timeline: --a; } .i{ animation: indicate; animation-timeline: --a; } Peep the contact list indicators ✨ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

56,816 次观看 • 3 年前

Future CSS Tip! 🔮 You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS 🤯 el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS 🤯 el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

434,072 次观看 • 3 年前

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇

CSS Tip! 📜 You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥 .search { animation: shrink; animation-timeline: scroll(); animation-range: 0 calc(var(--header-height) * 0.5); } @keyframes shrink { to { width: calc(100% - var(--button-size); } } The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙 For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡 header { animation: shadow; animation-timeline: scroll(); animation-range: var(--header-height) calc(var(--header-height) * 1.5); } @keyframes shadow { to { box-shadow: 0 5px 10px hsl(0 0% 0%); } } Then you have the little extras! 🧸🎈 Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨ Give it a try! ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

495,991 次观看 • 2 年前

CSS scroll-driven "CTA to Nav" 🗺️ nav { grid-template-columns: auto calc(var(--grow) * 240px) auto; transition: 1s var(--custom); } @keyframes expand { to { --expand: 1; } } body { animation: expand steps(1); animation-timeline: --hero; animation-range: exit; }

CSS scroll-driven "CTA to Nav" 🗺️ nav { grid-template-columns: auto calc(var(--grow) * 240px) auto; transition: 1s var(--custom); } @keyframes expand { to { --expand: 1; } } body { animation: expand steps(1); animation-timeline: --hero; animation-range: exit; }

jhey ʕ•ᴥ•ʔ

263,267 次观看 • 2 年前

Future CSS Tip! 🔮 You can power micro-interactions with scroll driven animations 😎 Define a range with custom props and hook up to body scroll 📜 .avatar{ animation:shrink; animation-timeline:scroll(root); animation-range:calc(var(--head)*0.9) ...; } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

147,052 次观看 • 3 年前