正在加载视频...

视频加载失败

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

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

146,364 subscribers

147,001 次观看 • 3 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

10 条评论

jhey ▲🐻🎈 的头像

jhey ▲🐻🎈3 年前

Here's that @CodePen link! 🚀 Remember. Only in Chrome Canary for now 🥲 Some of that calc above is obfuscated. If you have an idea of the size of things in your header, it's not too bad working out when things should start moving ✨

Florin Pop 👨🏻‍💻 的头像

Florin Pop 👨🏻‍💻3 年前

@CodePen Just wondering… how many projects do you pop out a day? 😆 You’re on fire my friend!

ishmam 的头像

ishmam3 年前

@CodePen epic! this site’s header button hover effect is pretty cool. in case you ever make a pen for it 🥺

Marc Boschma 的头像

Marc Boschma3 年前

@CodePen It would be really cool if your avatar turned to face the read as it recedes 🤓

jhey ▲🐻🎈 的头像

jhey ▲🐻🎈3 年前

@CodePen What a great idea! Can totally do that too! Thanks Marc 🙏

Softserve Digital Development 的头像

Softserve Digital Development3 年前

@CodePen @mr_papoutsis

Fajar Siddiq 的头像

Fajar Siddiq3 年前

@CodePen this is cool @joshmanders

Artur Bień 的头像

Artur Bień3 年前

@CodePen Its not smooth tho. Kinda jumps in a weird way 🤔

jhey ▲🐻🎈 的头像

jhey ▲🐻🎈3 年前

@CodePen Yeah, this is one of my current gripes with the API 😕 Smooth scrubbing is basically limited to a trackpad. Using an input device like a mouse is really hard to get smooth. I'll still be reaching for GreenSock in most cases unless things like that are improved 💯

kehinde.code 的头像

kehinde.code3 年前

@CodePen Future is here.

相关视频

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

433,827 次观看 • 2 年前

Future CSS Tip! 🔮 You can create sweet scroll-driven micro-interactions using CSS scroll-driven animations 😎 .avatar { animation: scale-down; animation-timeline: scroll(); animation-range: var(--header-range); } @ keyframes scale-down { to { scale: 0.3; } } What's happening in this one? 👀 1. Avatar moves and scales down as the header sticks 2. Name changes color and slides over 3. Header darkens to give the text contrast 4. Header gets a shadow 5. Notice the avatar scrub too! 👀 It's scroll-driving the sprite animation technique we went over earlier in the week ✨ So much fun! ✨ Could even tie in the new easings from earlier too! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

685,436 次观看 • 2 年前

Future CSS Tip! 🔮 You can combine scroll-driven animation and anchor positioning to create a CSS only nav indicator 🤯 .el { animation: move; animation-timeline: --blog; } keyframes move {to { left: anchor(--blog left); }} Adapts to long text! 😎 CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can combine scroll-driven animation and anchor positioning to create a CSS only nav indicator 🤯 .el { animation: move; animation-timeline: --blog; } keyframes move {to { left: anchor(--blog left); }} Adapts to long text! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

129,255 次观看 • 2 年前

Future CSS Tip! 🔮 Use scroll-driven animations to create those cool Apple-style text reveals 🔥 No JavaScript required 👀 Responsive too! 🙌 .sentence { animation: highlight; animation-timeline: view(); animation-range: cover 40% cover 75%; } CodePen.IO link below! 👇

Future CSS Tip! 🔮 Use scroll-driven animations to create those cool Apple-style text reveals 🔥 No JavaScript required 👀 Responsive too! 🙌 .sentence { animation: highlight; animation-timeline: view(); animation-range: cover 40% cover 75%; } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

347,926 次观看 • 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,562 次观看 • 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,805 次观看 • 3 年前

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

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

CSS Tip! 📜 You could create a sticky popout bento effect with position: sticky and scroll-driven animation 🤩 The trick is to use position: sticky with bottom instead of top like we would usually 🤙 Then we can use scroll-driven animation as a progressive enhancement to fade things and move the phone around ✨ section { view-timeline-name: --section; } .phone { scale: 1.5; translate: 30% 0; animation-name: slip, slide; 👈 2 scroll animations animation-timing-function: linear; animation-fill-mode: both; animation-range: 👈 2 ranges entry 50% entry 60%, exit 10% exit 25%; animation-timeline: --section; } keyframes slip { to { translate: -5% 0; scale: 1 } } keyframes slide { to { translate: -5% 30%; } } If scroll-driven animations aren't supported, we still provide a neat effect using position: sticky alone 😎 The trick to that is having an absolutely positioned card that comes up from beneath the phone image and gives the illusion that they're joined. But, they aren't! CodePen.IO link below! 👇 cc Aaron Stezycki

CSS Tip! 📜 You could create a sticky popout bento effect with position: sticky and scroll-driven animation 🤩 The trick is to use position: sticky with bottom instead of top like we would usually 🤙 Then we can use scroll-driven animation as a progressive enhancement to fade things and move the phone around ✨ section { view-timeline-name: --section; } .phone { scale: 1.5; translate: 30% 0; animation-name: slip, slide; 👈 2 scroll animations animation-timing-function: linear; animation-fill-mode: both; animation-range: 👈 2 ranges entry 50% entry 60%, exit 10% exit 25%; animation-timeline: --section; } keyframes slip { to { translate: -5% 0; scale: 1 } } keyframes slide { to { translate: -5% 30%; } } If scroll-driven animations aren't supported, we still provide a neat effect using position: sticky alone 😎 The trick to that is having an absolutely positioned card that comes up from beneath the phone image and gives the illusion that they're joined. But, they aren't! CodePen.IO link below! 👇 cc Aaron Stezycki

jhey ʕ•ᴥ•ʔ

341,765 次观看 • 2 年前

Future CSS Tip! 🔮 You can create this parallax-like image grid effect using scroll-driven animation and the reusable keyframe technique from the other day 🔥 .collage { height: 200vh; view-timeline: --collage; (The blue dashed element) } .photo { animation-name: travel; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: --collage; animation-range: entry 100% exit 0%; } .photo:nth-of-type(7n + 1):nth-of-type(even) { --vertical: -100%; --horizontal: 100%; } keyframes travel { 0% { translate: 0 0; } 50% { translate: 0 var(--vertical); } 100% { translate: var(--horizontal) var(--vertical); } } CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can create this parallax-like image grid effect using scroll-driven animation and the reusable keyframe technique from the other day 🔥 .collage { height: 200vh; view-timeline: --collage; (The blue dashed element) } .photo { animation-name: travel; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: --collage; animation-range: entry 100% exit 0%; } .photo:nth-of-type(7n + 1):nth-of-type(even) { --vertical: -100%; --horizontal: 100%; } keyframes travel { 0% { translate: 0 0; } 50% { translate: 0 var(--vertical); } 100% { translate: var(--horizontal) var(--vertical); } } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

268,851 次观看 • 2 年前

CSS Tip! 📜 You can use scroll-driven animations to progressively enhance collapsing a floating call to action 🤏 .cta { animation: shrink; animation-timeline: scroll(); animation-range: 0 100px; } @keyframes shrink { to { width: 48px; } } That's the gist of it. Use the body scroll position with animation-timeline: scroll(). Define the animation-range as when you have scrolled 100px. There's a little more though 🤓 That would "scrub" the width animation. Ideally, you want to trigger that animation. You could animate a custom property with steps() timing and use that to define the width ✨ @property --scrub { syntax: ' '; inherits: true; initial-value: 0; } body { animation: scrub both steps(1, end); animation-timeline: scroll(); animation-range: 0 100px; } Then transition the --scrub property on the CTA and use it for the width 🤙 .cta { transition: --scrub 0.2s; width: calc(48px + (120px * (1 - (var(--scrub) / 100)))); } Other animations are a matter of preference and timing. For example, you could then make the hand wave, scale down the size, and then slide a gradient across 😉 They have the same structure and technique as the original concept. Waving the hand? 👋 Run it twice, offset the transform-origin. .hand { animation: wave both linear 2; animation-timeline: scroll(); animation-range: 30vh 50vh; transform-origin: 65% 75%; } @keyframes wave { 50% { rotate: 20deg; } } How's it progressively enhanced? Wrap everything in a @supports query and a @media query. If there isn't support, users still get a good experience. It's a floating action button that's circular and already collapsed 🤙 @supports(animation-timeline: scroll()) { @media(prefers-reduced-motion: no-preference) {...} } Definitely have a play with the code. Amazing what we're going to be able to do with CSS alone! 🔥 CodePen.IO link below! 👇

CSS Tip! 📜 You can use scroll-driven animations to progressively enhance collapsing a floating call to action 🤏 .cta { animation: shrink; animation-timeline: scroll(); animation-range: 0 100px; } @keyframes shrink { to { width: 48px; } } That's the gist of it. Use the body scroll position with animation-timeline: scroll(). Define the animation-range as when you have scrolled 100px. There's a little more though 🤓 That would "scrub" the width animation. Ideally, you want to trigger that animation. You could animate a custom property with steps() timing and use that to define the width ✨ @property --scrub { syntax: ' '; inherits: true; initial-value: 0; } body { animation: scrub both steps(1, end); animation-timeline: scroll(); animation-range: 0 100px; } Then transition the --scrub property on the CTA and use it for the width 🤙 .cta { transition: --scrub 0.2s; width: calc(48px + (120px * (1 - (var(--scrub) / 100)))); } Other animations are a matter of preference and timing. For example, you could then make the hand wave, scale down the size, and then slide a gradient across 😉 They have the same structure and technique as the original concept. Waving the hand? 👋 Run it twice, offset the transform-origin. .hand { animation: wave both linear 2; animation-timeline: scroll(); animation-range: 30vh 50vh; transform-origin: 65% 75%; } @keyframes wave { 50% { rotate: 20deg; } } How's it progressively enhanced? Wrap everything in a @supports query and a @media query. If there isn't support, users still get a good experience. It's a floating action button that's circular and already collapsed 🤙 @supports(animation-timeline: scroll()) { @media(prefers-reduced-motion: no-preference) {...} } Definitely have a play with the code. Amazing what we're going to be able to do with CSS alone! 🔥 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

177,781 次观看 • 2 年前

Future CSS Tip! 🔮 You can create this scrolling image pop-out effect with CSS scroll-driven animations and zero JS! 🔥 .pop { view-timeline-name: --pop; } img { animation: slide both; animation-timeline: --pop; animation-range: entry 100% cover 50%; } .skateboarder { --x: 0; --y: -45%; } @ keyframes slide { to { translate: var(--x) var(--y); } } The "trick" is to layer up two image elements and keep one clipped by the container 🤙 Slide them both together and it will look like one pops out of the container 🎈 You can leverage scoped custom properties to translate by different distances too! 😎 You can use macOS's built-in image background removal tool to get the pop-out image ✨ And for added effect, you can animate the brightness on that to make it stand out ⭐️ CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can create this scrolling image pop-out effect with CSS scroll-driven animations and zero JS! 🔥 .pop { view-timeline-name: --pop; } img { animation: slide both; animation-timeline: --pop; animation-range: entry 100% cover 50%; } .skateboarder { --x: 0; --y: -45%; } @ keyframes slide { to { translate: var(--x) var(--y); } } The "trick" is to layer up two image elements and keep one clipped by the container 🤙 Slide them both together and it will look like one pops out of the container 🎈 You can leverage scoped custom properties to translate by different distances too! 😎 You can use macOS's built-in image background removal tool to get the pop-out image ✨ And for added effect, you can animate the brightness on that to make it stand out ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

634,437 次观看 • 2 年前

One of Apple's tricks is to swap images on scroll 📜 You could do it with CSS scroll animation. Translate a track of images with steps ease! ⭐️ .track { animation: play steps(63); animation-timeline: --head; } @keyframes play { to { translate: 0 -6300%; }} Watch this 👇

One of Apple's tricks is to swap images on scroll 📜 You could do it with CSS scroll animation. Translate a track of images with steps ease! ⭐️ .track { animation: play steps(63); animation-timeline: --head; } @keyframes play { to { translate: 0 -6300%; }} Watch this 👇

jhey ʕ•ᴥ•ʔ

217,457 次观看 • 2 年前

Future CSS Tip! 📜 You can create these landing page effects with CSS scroll-driven animations and zero JavaScript 🔥 Blurred text on exit? 👀 @keyframes fade { to { opacity: 0; filter: blur(2rem); } } h2 { animation: fade; animation-timeline: view(); animation-range: cover 40% cover 85%; } Lots of treats in this one! ✨ How about the circular shape on scroll? That's an animated clip-path 😮 @keyframes unclip { to { clip-path: ellipse(220% 200% at 50% 175%); } } Create a clip-path with a large size that's offset vertically. On scroll, animate it in ⭐️ .content { clip-path: ellipse(220% 200% at 50% 300%); animation: unclip both linear; animation-timeline: --article; animation-range: entry; } That second section combines unclipping with scaling down an image at the same time 🤓 Using the same animation-timeline 🫶 @keyframes scale-down { 0% { scale: 5; } } img { animation: scale-down; animation-timeline: --article; 👈 animation-range: entry; } Every section gets a scoped view-timeline of --article. That's scoped so we can reuse it for all the animations we need 🙌 article { view-timeline-name: --article; } Honestly, the more you play with this stuff, the more tricks you will find 💯 And it also makes you think "Wow! CSS can do this!" As always, CodePen.IO link below! 👇

Future CSS Tip! 📜 You can create these landing page effects with CSS scroll-driven animations and zero JavaScript 🔥 Blurred text on exit? 👀 @keyframes fade { to { opacity: 0; filter: blur(2rem); } } h2 { animation: fade; animation-timeline: view(); animation-range: cover 40% cover 85%; } Lots of treats in this one! ✨ How about the circular shape on scroll? That's an animated clip-path 😮 @keyframes unclip { to { clip-path: ellipse(220% 200% at 50% 175%); } } Create a clip-path with a large size that's offset vertically. On scroll, animate it in ⭐️ .content { clip-path: ellipse(220% 200% at 50% 300%); animation: unclip both linear; animation-timeline: --article; animation-range: entry; } That second section combines unclipping with scaling down an image at the same time 🤓 Using the same animation-timeline 🫶 @keyframes scale-down { 0% { scale: 5; } } img { animation: scale-down; animation-timeline: --article; 👈 animation-range: entry; } Every section gets a scoped view-timeline of --article. That's scoped so we can reuse it for all the animations we need 🙌 article { view-timeline-name: --article; } Honestly, the more you play with this stuff, the more tricks you will find 💯 And it also makes you think "Wow! CSS can do this!" As always, CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

426,422 次观看 • 2 年前

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

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

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,829 次观看 • 3 年前

CSS Tip! 🍬 You can create a CSS-only sticky CTA using position: sticky or scroll-driven animations 🤙 .cta { position: sticky; margin-top: 110vh; bottom: 2rem; /* 👈 Stick! */ } This is one way 👀 This first way relies on you setting a layout on the body and putting the CTA in a zero-space part of the layout body { display: grid; grid-template-columns: auto 0; } The children of the body are an element with your content and then the CTA. You could also use display:flex too. .content { flex: 1 0 100%; } .cta { place-self: end; } As you scroll the body, the CTA comes into view and sticks in position 🙌 That's one way. If you want to take it further and do something like flip between showing or not, maybe scale it up, or add some special easing, etc. an animation is another way 📜 First, change the styles for your CTA. Note the translate property that's powered by a custom property .cta { position: fixed; bottom: 2rem; right: 2rem; translate: 0 calc(20vh - (var(--show) * 20vh)); transition: translate 0.875s var(--elastic); } Next you need a custom property that you're going to animate @property --show { inherits: true; initial-value: 0; syntax: ' '; } Lastly, you animate this value on the body. As the property value changes, the value will trickle down to the CTA @supports (animation-timeline: scroll()) { body { animation: show-cta both steps(1); animation-timeline: scroll(root); animation-range: 0 10vh; } @keyframes show-cta { to { --show: 1; } } } Using @supports you can use this as a progressive enhancement. If scroll-driven animations are supported, use them. Otherwise fallback to using position: sticky 🤙 That's it! As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇

CSS Tip! 🍬 You can create a CSS-only sticky CTA using position: sticky or scroll-driven animations 🤙 .cta { position: sticky; margin-top: 110vh; bottom: 2rem; /* 👈 Stick! / } This is one way 👀 This first way relies on you setting a layout on the body and putting the CTA in a zero-space part of the layout body { display: grid; grid-template-columns: auto 0; } The children of the body are an element with your content and then the CTA. You could also use display:flex too. .content { flex: 1 0 100%; } .cta { place-self: end; } As you scroll the body, the CTA comes into view and sticks in position 🙌 That's one way. If you want to take it further and do something like flip between showing or not, maybe scale it up, or add some special easing, etc. an animation is another way 📜 First, change the styles for your CTA. Note the translate property that's powered by a custom property .cta { position: fixed; bottom: 2rem; right: 2rem; translate: 0 calc(20vh - (var(--show) 20vh)); transition: translate 0.875s var(--elastic); } Next you need a custom property that you're going to animate @property --show { inherits: true; initial-value: 0; syntax: ' '; } Lastly, you animate this value on the body. As the property value changes, the value will trickle down to the CTA @supports (animation-timeline: scroll()) { body { animation: show-cta both steps(1); animation-timeline: scroll(root); animation-range: 0 10vh; } @keyframes show-cta { to { --show: 1; } } } Using @supports you can use this as a progressive enhancement. If scroll-driven animations are supported, use them. Otherwise fallback to using position: sticky 🤙 That's it! As always, any questions or requests, hit me up! 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

133,020 次观看 • 2 年前

Future CSS Tip! 🔮 You could combine anchor positioning + :has to create this kinda iPad style follow effect ✨ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! 😎 CodePen.IO link below! 👇

Future CSS Tip! 🔮 You could combine anchor positioning + :has to create this kinda iPad style follow effect ✨ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

201,201 次观看 • 3 年前