Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

extra little details™ animate a CSS custom property to sync scrollbar-color with the active item ✨ html { scrollbar-color: oklch(65% 0.3 var(--p)) #0000; animation: sync; animation-timeline: --ul; animation-range: entry 50% exit 50% } @keyframes sync { to { --p: 320; } }

jhey ʕ•ᴥ•ʔ

146,360 subscribers

61,107 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & Teknoloji

Anya Rossi• Live Now

Private livecam show

8 Yorum

ye profil fotoğrafı

ye1 yıl önce

Do you build this off the dome or do you use resources like mdn when you build stuff strictly with CSS?

jhey ▲🐻🎈 profil fotoğrafı

jhey ▲🐻🎈1 yıl önce

straight off the dome 🤙 it's purely from repetition and exploration over the years

Ofelquis G profil fotoğrafı

Ofelquis G1 yıl önce

Tried to find the codepen but couldn’t find it

Riaad Arif profil fotoğrafı

Riaad Arif1 yıl önce

This is pure talent! 🌟

pavle993💹🧲 profil fotoğrafı

pavle993💹🧲1 yıl önce

sick!

Gustav Ekerot profil fotoğrafı

Gustav Ekerot1 yıl önce

such a fun and awesome detail!

conrad profil fotoğrafı

conrad1 yıl önce

its little details like this that separate a website from an experience

Jabez ✦ profil fotoğrafı

Jabez ✦1 yıl önce

You're killin' it!

Benzer Videolar

CSS scroll-driven contents island 🏖️ :root { animation: sync; animation-timeline: scroll(); counter-reset: p var(--p); } @keyframes sync { to {--p: 100;}} .p::before { content: counter(p) '%';}

CSS scroll-driven contents island 🏖️ :root { animation: sync; animation-timeline: scroll(); counter-reset: p var(--p); } @keyframes sync { to {--p: 100;}} .p::before { content: counter(p) '%';}

jhey ʕ•ᴥ•ʔ

153,024 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

$A CSS scroll version of the gooey island 🤙 .island { filter: url(#svg-goo); } .island__avatar { animation: hide; animation-timeline: scroll(); animation-range: 0 var(--header-size); transform-origin: 50% 0; } @keyframes hide { to { translate: -50% -80px; scale: 0.3; } }$

A CSS scroll version of the gooey island 🤙 .island { filter: url(#svg-goo); } .island__avatar { animation: hide; animation-timeline: scroll(); animation-range: 0 var(--header-size); transform-origin: 50% 0; } @keyframes hide { to { translate: -50% -80px; scale: 0.3; } }

jhey ʕ•ᴥ•ʔ

154,768 görüntüleme • 1 yıl önce

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,504 görüntüleme • 2 yıl önce

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,168 görüntüleme • 1 yıl önce

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,187 görüntüleme • 2 yıl önce

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,496 görüntüleme • 2 yıl önce

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,630 görüntüleme • 2 yıl önce

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,112 görüntüleme • 2 yıl önce

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,000 görüntüleme • 1 yıl önce

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,266 görüntüleme • 2 yıl önce

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,664 görüntüleme • 2 yıl önce

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,710 görüntüleme • 1 yıl önce

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,338 görüntüleme • 2 yıl önce

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,420 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce

Custom property powered responsive scroll animations with CSS 🔥 .card { animation: morph; animation-timeline: --scroll; } .card--one { --x: -35vw; --r: -10deg; } .card--two { --x: 35vw; } @keyframes morph { 0% { translate: var(--x) var(--y); rotate: var(--r); } }

Custom property powered responsive scroll animations with CSS 🔥 .card { animation: morph; animation-timeline: --scroll; } .card--one { --x: -35vw; --r: -10deg; } .card--two { --x: 35vw; } @keyframes morph { 0% { translate: var(--x) var(--y); rotate: var(--r); } }

jhey ʕ•ᴥ•ʔ

201,983 görüntüleme • 2 yıl önce

easing is everything use different CSS timing functions per axis for custom motion paths 👨‍🍳 .p { animation: x .8s var(--x-time), y .8s var(--y-time); animation-composition: accumulate; } @keyframes x { to { translate: var(--x) 0 } @keyframes y { to { translate: 0 var(--y) }

easing is everything use different CSS timing functions per axis for custom motion paths 👨‍🍳 .p { animation: x .8s var(--x-time), y .8s var(--y-time); animation-composition: accumulate; } @keyframes x { to { translate: var(--x) 0 } @keyframes y { to { translate: 0 var(--y) }

jhey ʕ•ᴥ•ʔ

270,277 görüntüleme • 8 ay önce

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,087 görüntüleme • 1 yıl önce

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,537 görüntüleme • 1 yıl önce