正在加载视频...

视频加载失败

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

CSS text reveal on scroll 📜 <span style="--start: 210; --end: 280;">details</span> span { animation: reveal; animation-timeline: --section; animation-range: contain calc(var(--start) * 1px) contain calc(var(--end) * 1px); } @keyframes reveal { 0% { opacity: 0.2; }}

jhey ʕ•ᴥ•ʔ

146,523 subscribers

165,462 次观看 • 2 年前 •via X (Twitter)

艺术科学技术教育

Anya Rossi• Live Now

Private livecam show

10 条评论

jhey ▲🐻🎈 的头像

jhey ▲🐻🎈2 年前

The trick here is using some JavaScript to calculate the "Pixels per character" for the scroll animation 😎 You could do that in a server component or at build time by splitting the text and setting a "Pixels per character" value 🤙

jhey ▲🐻🎈 的头像

jhey ▲🐻🎈2 年前

The neat trick here is making the "Pixels per character" part dynamic and inlining that as a custom property too. Then you could update it for different size viewports 🚀

Heitor Lima 的头像

Heitor Lima2 年前

@GianPaneto

🦋 Lankymart 的头像

🦋 Lankymart2 年前

Wondow what @adamsilverhq would make of this 🤔

jhey ▲🐻🎈 的头像

jhey ▲🐻🎈2 年前

@adamsilverhq For motion prefs, I'd strip out the animation and sticky part. The text has to be split into separate words but is aria-hidden. Then you can duplicate the text with a screenreader version. Main thing here was to show how to build it as per request 🤙

JV Shah 的头像

JV Shah2 年前

Great

chandigarh city 的头像

chandigarh city2 年前

Looks great

A L I 的头像

A L I2 年前

Where is the code?

2+2=5 的头像

2+2=52 年前

nice 🔥

Umut Akıncı 的头像

Umut Akıncı2 年前

its cool

相关视频

CSS scroll to unblur text ✨ .word { --start: calc(var(--i) * var(--pxPerWord)); --end: calc((var(--i) + 1) * var(--pxPerWord)); animation: fx; animation-timeline: --section; animation-range: var(--start) var(--end); } @keyframes fx { 0% { filter: blur(20px); opacity: 0; }}

CSS scroll to unblur text ✨ .word { --start: calc(var(--i) * var(--pxPerWord)); --end: calc((var(--i) + 1) * var(--pxPerWord)); animation: fx; animation-timeline: --section; animation-range: var(--start) var(--end); } @keyframes fx { 0% { filter: blur(20px); opacity: 0; }}

jhey ʕ•ᴥ•ʔ

121,804 次观看 • 2 年前

CSS blurred text reveal on scroll 📜 .character { animation: drop; animation-timeline: --section; animation-range: var(--start) var(--end); } @keyframes drop { 0% { filter: blur(10px); translate: 0 -75%; } } Inspo: daylight

CSS blurred text reveal on scroll 📜 .character { animation: drop; animation-timeline: --section; animation-range: var(--start) var(--end); } @keyframes drop { 0% { filter: blur(10px); translate: 0 -75%; } } Inspo: daylight

jhey ʕ•ᴥ•ʔ

104,947 次观看 • 2 年前

CSS scroll to decrypt 🤖 The trick is translating text on scroll within a clipped element ✨ (Watch 🎞️) .char { animation: t both steps(10); animation-timeline: --heading; animation-range: contain calc(var(--i) * 1%)...; } @keyframes t { to { translate: 0 calc(100% - 1lh);}}

CSS scroll to decrypt 🤖 The trick is translating text on scroll within a clipped element ✨ (Watch 🎞️) .char { animation: t both steps(10); animation-timeline: --heading; animation-range: contain calc(var(--i) * 1%)...; } @keyframes t { to { translate: 0 calc(100% - 1lh);}}

jhey ʕ•ᴥ•ʔ

264,678 次观看 • 2 年前

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,626 次观看 • 1 年前

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,860 次观看 • 2 年前

scroll to type with CSS ✨ p { animation: type steps(124); animation-timeline: --main; background: var(--cursor) calc(var(--pos) * 1ch) 0 / 1ch 1lh no-repeat border-box, var(--txt) 0 0 / calc(var(--pos) * 1ch) 100% no-repeat text; } @keyframes type { to { --pos: 124; }}

scroll to type with CSS ✨ p { animation: type steps(124); animation-timeline: --main; background: var(--cursor) calc(var(--pos) * 1ch) 0 / 1ch 1lh no-repeat border-box, var(--txt) 0 0 / calc(var(--pos) * 1ch) 100% no-repeat text; } @keyframes type { to { --pos: 124; }}

jhey ʕ•ᴥ•ʔ

118,095 次观看 • 1 年前

Responsive inverted reveal scroller with CSS 🤙 img { position: fixed; animation: clip; animation-timeline: --section; animation-range: exit; } @keyframes clip { to { clip-path: inset(100% 0 0 0); } Fix the image, animate clip on parent scroll position (--section) ✨

Responsive inverted reveal scroller with CSS 🤙 img { position: fixed; animation: clip; animation-timeline: --section; animation-range: exit; } @keyframes clip { to { clip-path: inset(100% 0 0 0); } Fix the image, animate clip on parent scroll position (--section) ✨

jhey ʕ•ᴥ•ʔ

90,656 次观看 • 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 年前

CSS only number slider using @property, round(), sin() and scroll-driven animation 🤙 @keyframes progress { to { --val: 100; }} .number-wheel { transform: rotateX(calc(var(--val) * -36deg)); } Watch for the trick reveal 👇

CSS only number slider using @property, round(), sin() and scroll-driven animation 🤙 @keyframes progress { to { --val: 100; }} .number-wheel { transform: rotateX(calc(var(--val) * -36deg)); } Watch for the trick reveal 👇

jhey ʕ•ᴥ•ʔ

372,869 次观看 • 1 年前

CSS Tip! 📜 You can create scroll indicators with scroll-driven animations 📍 Reveal a shadow, mask the content, etc. .indicator--top { animation: reveal; animation-timeline: scroll(nearest); animation-range: 0 2rem; } @keyframes reveal { 0% { scale: 1 0; }} The trick here is to hook into the scroll position of the nearest scroll container with .indicator { animation-timeline: scroll(nearest); } Your reveal animation is going to scale the indicator up from 0 on the y-axis @keyframes reveal { 0% { scale: 1 0; }} The timeline is however much you want to scroll by before revealing the indicator. In this example, you're saying to reveal the indicator once the scroller has been scrolled by 2rem .indicator--top { animation-range: 0 2rem; } How do you make this work for the opposite indicator? Use animation direction and a range based on the end of the scroller .indicator--bottom { animation-range: calc(100% - var(--scroll-buffer)) 100%; animation-direction: reverse; } You can use this same concept for the different styles to reveal different indicators. The only one that's different is the mask. The mask one animates the mask size across three mask layers and uses a mask composite to exclude the pieces that don't need to be shown 🤙 As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇

CSS Tip! 📜 You can create scroll indicators with scroll-driven animations 📍 Reveal a shadow, mask the content, etc. .indicator--top { animation: reveal; animation-timeline: scroll(nearest); animation-range: 0 2rem; } @keyframes reveal { 0% { scale: 1 0; }} The trick here is to hook into the scroll position of the nearest scroll container with .indicator { animation-timeline: scroll(nearest); } Your reveal animation is going to scale the indicator up from 0 on the y-axis @keyframes reveal { 0% { scale: 1 0; }} The timeline is however much you want to scroll by before revealing the indicator. In this example, you're saying to reveal the indicator once the scroller has been scrolled by 2rem .indicator--top { animation-range: 0 2rem; } How do you make this work for the opposite indicator? Use animation direction and a range based on the end of the scroller .indicator--bottom { animation-range: calc(100% - var(--scroll-buffer)) 100%; animation-direction: reverse; } You can use this same concept for the different styles to reveal different indicators. The only one that's different is the mask. The mask one animates the mask size across three mask layers and uses a mask composite to exclude the pieces that don't need to be shown 🤙 As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

99,168 次观看 • 2 年前

$Switching word combos on scroll with CSS 🖱️ main { animation: switch both steps(3); animation-timeline: view(); } @keyframes switch { to { --i: 3; }} .words__track { translate: 0 calc(var(--i) * -100%); } Result of a DM request 👇$

Switching word combos on scroll with CSS 🖱️ main { animation: switch both steps(3); animation-timeline: view(); } @keyframes switch { to { --i: 3; }} .words__track { translate: 0 calc(var(--i) * -100%); } Result of a DM request 👇

jhey ʕ•ᴥ•ʔ

92,985 次观看 • 2 年前

works great on blocks of text too 🤙 .text { --duration: calc(var(--text-length) * 0.12s); animation: shimmer var(--duration) infinite; } @keyframes shimmer { 0% { background-position: 100% 0; } } animation-duration maps to the text length using CSS custom properties 🚀

works great on blocks of text too 🤙 .text { --duration: calc(var(--text-length) * 0.12s); animation: shimmer var(--duration) infinite; } @keyframes shimmer { 0% { background-position: 100% 0; } } animation-duration maps to the text length using CSS custom properties 🚀

jhey ʕ•ᴥ•ʔ

123,254 次观看 • 1 年前

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,148 次观看 • 2 年前

$CSS Trick ✨ You can create this glitch hover effect by animating pseudoelement content 🎬 button:hover span:after { animation: flip 0.2s calc(var(--i) * 0.05s); } @keyframes flip { 20% { content: '_'; } 40% { content: var(--c1); } 60% { content: var(--c2); } } It's a funky little track that allows you to animate text flipping with CSS 🤙 Leaning into custom properties, you can make each flip animation random with inline styles 🎨 C l Click Me You make use of each character within the keyframes above. And "--i" communicates the index that you can use for the animation-delay 🙌 That's all there is to it! As always, any requests or suggestions, hit me up! 🙏 CodePen.IO link below! 👇$

CSS Trick ✨ You can create this glitch hover effect by animating pseudoelement content 🎬 button:hover span:after { animation: flip 0.2s calc(var(--i) * 0.05s); } @keyframes flip { 20% { content: '_'; } 40% { content: var(--c1); } 60% { content: var(--c2); } } It's a funky little track that allows you to animate text flipping with CSS 🤙 Leaning into custom properties, you can make each flip animation random with inline styles 🎨 C l Click Me You make use of each character within the keyframes above. And "--i" communicates the index that you can use for the animation-delay 🙌 That's all there is to it! As always, any requests or suggestions, hit me up! 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

168,444 次观看 • 2 年前

Future CSS Tip! 🔮 You can create responsive animated text reveals with CSS scroll-driven animations 🔥 section { /* The red element in the video */ view-timeline-name: --section; } p { animation: fill both linear; animation-timeline: --section; animation-range: cover; } keyframes fill { to { --fill: 1; } } No JavaScript required with this trick 😎 What's happening there then? Well, we're animating a custom property value using @ property. @ property --fill { initial-value: 0; syntax: ' '; inherits: true; } Then the trick is background clipping the text and filling it with a multiline background by animating the background-position to fill the text 🤓 span { background-position-x: calc(-100vmax + (var(--progress) * 100vmax)); background-clip: text; color: transparent; } CodePen.IO link below 👇

Future CSS Tip! 🔮 You can create responsive animated text reveals with CSS scroll-driven animations 🔥 section { /* The red element in the video / view-timeline-name: --section; } p { animation: fill both linear; animation-timeline: --section; animation-range: cover; } keyframes fill { to { --fill: 1; } } No JavaScript required with this trick 😎 What's happening there then? Well, we're animating a custom property value using @ property. @ property --fill { initial-value: 0; syntax: ' '; inherits: true; } Then the trick is background clipping the text and filling it with a multiline background by animating the background-position to fill the text 🤓 span { background-position-x: calc(-100vmax + (var(--progress) 100vmax)); background-clip: text; color: transparent; } CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

408,863 次观看 • 3 年前

CSS Trick 📜 You can trigger text highlights on scroll with scroll-driven animations 😎 mark { animation: highlight; animation-timeline: view(); } @keyframes highlight { to { --lit: 1; }} mark span { background-position: calc(var(--lit) * -110%) 0; transition: background 1s; } The trick is using a scroll-driven animation to flip a custom property on a element 🎚️ You flip the value between 0 and 1, and that transitions the background position of the element mark { --lit: 0; animation: highlight steps(1) both; animation-timeline: view(); animation-range: entry 100% cover 10%; } The background has to be applied on a child of the mark to see the change in the custom property 👀 mark span { background: linear-gradient( 120deg, yellow 50%, transparent 50%) 110% 0 / 220% 100% no-repeat; background-position: calc(var(--lit) * 110%) 0; transition: background-position 1s; } The trick is to set the background-size so that it's bigger than the element and then split the background-color in the middle using a linear-gradient 🤙 And the property flips fills in the color 🫶 That's it! If there isn't support for scroll-driven animations, use JavaScript's IntersectionObserver API. The code for this is in the demo 😎 Cool example of using CSS as an IntersectionObserver! CodePen.IO link below 👇

CSS Trick 📜 You can trigger text highlights on scroll with scroll-driven animations 😎 mark { animation: highlight; animation-timeline: view(); } @keyframes highlight { to { --lit: 1; }} mark span { background-position: calc(var(--lit) * -110%) 0; transition: background 1s; } The trick is using a scroll-driven animation to flip a custom property on a element 🎚️ You flip the value between 0 and 1, and that transitions the background position of the element mark { --lit: 0; animation: highlight steps(1) both; animation-timeline: view(); animation-range: entry 100% cover 10%; } The background has to be applied on a child of the mark to see the change in the custom property 👀 mark span { background: linear-gradient( 120deg, yellow 50%, transparent 50%) 110% 0 / 220% 100% no-repeat; background-position: calc(var(--lit) * 110%) 0; transition: background-position 1s; } The trick is to set the background-size so that it's bigger than the element and then split the background-color in the middle using a linear-gradient 🤙 And the property flips fills in the color 🫶 That's it! If there isn't support for scroll-driven animations, use JavaScript's IntersectionObserver API. The code for this is in the demo 😎 Cool example of using CSS as an IntersectionObserver! CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

208,411 次观看 • 2 年前

Little CSS Christmas tree for the holidays 🎄 Powered by CSS custom properties 💪 ~100 lines of CSS The trick is in the animation-delay ✨ For example; <div class=🔴 style="--index: 2;"> .🔴 { animation-delay: calc(var(--index) * -0.2s); } CodePen.IO link below! 👇

Little CSS Christmas tree for the holidays 🎄 Powered by CSS custom properties 💪 ~100 lines of CSS The trick is in the animation-delay ✨ For example; <div class=🔴 style="--index: 2;"> .🔴 { animation-delay: calc(var(--index) * -0.2s); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

374,796 次观看 • 3 年前

Future CSS Tip! 🍏 You can combine scroll-driven animations with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇

Future CSS Tip! 🍏 You can combine scroll-driven animations with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

180,213 次观看 • 3 年前

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,634 次观看 • 2 年前

Extra CSS Trick! 🚀 Use scroll-padding-inline with some calc on the track to make the indicator click JS free 🤙 (See video 🎬) ul { scroll-behavior: smooth; scroll-padding-inline: calc( 50vw - (var(--card-width) * 0.5 ); } You could color those indicators as requested by 🚨 abelardoit 🚨 .indicator::after { background: hsl(var(--hue) 90% 70%); } @keyframes show { 50% { opacity: 1; }} Combined with the same animation properties from the original demo ⭐️ Rad! 😎

Extra CSS Trick! 🚀 Use scroll-padding-inline with some calc on the track to make the indicator click JS free 🤙 (See video 🎬) ul { scroll-behavior: smooth; scroll-padding-inline: calc( 50vw - (var(--card-width) * 0.5 ); } You could color those indicators as requested by 🚨 abelardoit 🚨 .indicator::after { background: hsl(var(--hue) 90% 70%); } @keyframes show { 50% { opacity: 1; }} Combined with the same animation properties from the original demo ⭐️ Rad! 😎

jhey ʕ•ᴥ•ʔ

94,855 次观看 • 2 年前