正在加载视频...

视频加载失败

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

366,000 次观看 • 1 年前 •via X (Twitter)

10 条评论

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

original concept here on the "forge & form" site 👏 scroll to the bottom 👇 p.s hadn't seen this one on here so couldn't quote it

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

here's the @CodePen for this one 🤙 wanted to get that colorful scrollbar experiment in place first before posting it 🙏 now we hop on a plane ✈️

Elliott Johnston 的头像
Elliott Johnston1 年前

Here's a similar example I coded up

fangjun 的头像
fangjun1 年前

can you share the code example? thanks.

Lewis 的头像
Lewis1 年前

This would be cool as a custom select

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

now that's an idea! 💡

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

like seeing these and want to learn more about how to build awesome UIs for the web? Check out my newsletter, "The Craft of UI" quite the backlog of issues coming 🤙 👉

Tyrone C. 的头像
Tyrone C.1 年前

That is so sick 👀

Ji @ crypto-cafe (YT) 的头像
Ji @ crypto-cafe (YT)1 年前

can we get an additional level of items? like a 2 tiered mindmap in scrollable style.

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

that would be neat, a two-tiered set would work as well by nesting the "stickiness" would need some sentences to build out with that structure 🤔

相关视频

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

232,131 次观看 • 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! 👇

jhey ʕ•ᴥ•ʔ

575,316 次观看 • 2 年前