Загрузка видео...

Не удалось загрузить видео

На главную

revisiting some 3D CSS scroll-driven animations 💻

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

135,314 subscribers

35,993 просмотров • 1 год назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 10

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 год назад

p.s the laptop is made out of CSS too 👨‍🍳

Фото профиля Steve Lauda
Steve Lauda1 год назад

The 3D model is made in CSS too?

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ1 год назад

sure is! every piece 👨‍🍳

Фото профиля 共産主義のト二イ
共産主義のト二イ1 год назад

You‘re the Lionel Messi of CSS

Фото профиля Abe
Abe1 год назад

Including (and animating) the shadow is just 👌

Фото профиля raijin
raijin1 год назад

hard man

Фото профиля SIP
SIP1 год назад

stop

Фото профиля John Glennan - Techbridge Digital
John Glennan - Techbridge Digital1 год назад

You cook!!

Фото профиля Artemis & Atargatis
Artemis & Atargatis1 год назад

Are you living legend Sir.

Фото профиля Jenna Grip (JojoIsMe on Bsky)
Jenna Grip (JojoIsMe on Bsky)1 год назад

And it runs this smoothly even on lower end hardware? Very impressive.

Похожие видео

Perfect web scroll animations with ease! → Explore performant, declarative Scroll-driven Animations with WAAPI, CSS, and Scroll and View Progress Timelines.
0:48

Perfect web scroll animations with ease! → Explore performant, declarative Scroll-driven Animations with WAAPI, CSS, and Scroll and View Progress Timelines.

Chrome for Developers

10,722 просмотров • 1 год назад

I recreated the Google Antigravity website with Modern CSS. - Blog post: - Demo: Starting-Style, Houdini PaintWorklet, Scroll-Driven and Scroll-Triggered Animations, sibling-index(), Carousel, Scope, … #CSS
0:33

I recreated the Google Antigravity website with Modern CSS. - Blog post: - Demo: Starting-Style, Houdini PaintWorklet, Scroll-Driven and Scroll-Triggered Animations, sibling-index(), Carousel, Scope, … #CSS

Bramus

13,211 просмотров • 6 месяцев назад

how you take an image list and turn it into a 3D scroll-driven carousel with CSS 🤙
0:26

how you take an image list and turn it into a 3D scroll-driven carousel with CSS 🤙

jhey ʕ•ᴥ•ʔ

57,717 просмотров • 1 год назад

How does Apple make these crazy video transitions as you scroll? Let's recreate it with pure CSS with scroll-driven animations and view-timeline That's right, no scroll event listeners!
3:43

How does Apple make these crazy video transitions as you scroll? Let's recreate it with pure CSS with scroll-driven animations and view-timeline That's right, no scroll event listeners!

Steve (Builder.io)

113,931 просмотров • 7 месяцев назад

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳
1:14

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳

jhey ʕ•ᴥ•ʔ

59,139 просмотров • 6 месяцев назад

Could you achieve something similar with CSS? 🧑‍🍳 Scroll-driven animations && 3D perspective 🤝 The trick is driving the animation with list items that are smaller in height than the images (See the guides 👇)
0:45

Could you achieve something similar with CSS? 🧑‍🍳 Scroll-driven animations && 3D perspective 🤝 The trick is driving the animation with list items that are smaller in height than the images (See the guides 👇)

jhey ʕ•ᴥ•ʔ

166,189 просмотров • 2 лет назад

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! 👇
0:54

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 просмотров • 2 лет назад

#CSS only with scroll driven animation rad work Stijn Van Minnebruggen try it
0:23

#CSS only with scroll driven animation rad work Stijn Van Minnebruggen try it

Adam Argyle

12,041 просмотров • 1 год назад

"CSS scroll-driven scroll-snapping animations" by Giana Just a ten out of ten absolutely gorgeous example of using these new APIs. Not a line of JavaScript in sight (except a polyfill to make it work more places).
0:40

"CSS scroll-driven scroll-snapping animations" by Giana Just a ten out of ten absolutely gorgeous example of using these new APIs. Not a line of JavaScript in sight (except a polyfill to make it work more places).

CodePen.IO

14,856 просмотров • 2 лет назад

What’s old is new again 🌀 Learn how to create fluid, responsive scroll-driven animations that give your users engaging, app-like web experiences—with only a few lines of CSS. 🔗
0:48

What’s old is new again 🌀 Learn how to create fluid, responsive scroll-driven animations that give your users engaging, app-like web experiences—with only a few lines of CSS. 🔗

Chrome for Developers

6,844,437 просмотров • 1 год назад

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! 👇
0:23

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,987 просмотров • 3 лет назад

I’m extremely pleased to announce the release of Scroll-Driven Animations Debugger, a Chrome DevTools extension to visualize and debug Scroll-Driven Animations. 🔗 Get the extension from the Chrome Web Store and start inspecting
1:54

I’m extremely pleased to announce the release of Scroll-Driven Animations Debugger, a Chrome DevTools extension to visualize and debug Scroll-Driven Animations. 🔗 Get the extension from the Chrome Web Store and start inspecting

Bramus

40,932 просмотров • 2 лет назад

#CSS feature faceoff: scroll triggered stuck nav (left) vs scroll driven animation nav (right) which do you prefer? try it (use Canary for the scroll-state() support)
0:22

#CSS feature faceoff: scroll triggered stuck nav (left) vs scroll driven animation nav (right) which do you prefer? try it (use Canary for the scroll-state() support)

Adam Argyle

12,321 просмотров • 1 год назад

I used my holiday break to develop my new portfolio; depending on your browser it's 95% powered by the newest css techniques like scroll driven animations and view transitions! 💪 If you see the 🦖, it's (at least partly) powered by GSAP backup animations 😅
0:58

I used my holiday break to develop my new portfolio; depending on your browser it's 95% powered by the newest css techniques like scroll driven animations and view transitions! 💪 If you see the 🦖, it's (at least partly) powered by GSAP backup animations 😅

Cyd Stumpel

10,167 просмотров • 1 год назад

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) '%';}
0:30

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 просмотров • 1 год назад

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! 👇
0:49

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,782 просмотров • 2 лет назад

Similar technique 🤙 1. Take a scroll-snap list 2. Apply CSS scroll animations ✨ img { animation: flow; animation-timeline: --cover; } keyframes flow { 0% { transform: translate(-80%, 0) rotateY(-33deg); } } Few lines of CSS make it a progressively enhanced animated list 🔥
0:46

Similar technique 🤙 1. Take a scroll-snap list 2. Apply CSS scroll animations ✨ img { animation: flow; animation-timeline: --cover; } keyframes flow { 0% { transform: translate(-80%, 0) rotateY(-33deg); } } Few lines of CSS make it a progressively enhanced animated list 🔥

jhey ʕ•ᴥ•ʔ

114,209 просмотров • 2 лет назад

LOL some of these low-driven animations 😂
0:43

LOL some of these low-driven animations 😂

Jake

208,712 просмотров • 1 год назад

you can do this one with css grid, position: sticky, and some scroll animation 👨‍🍳
0:32

you can do this one with css grid, position: sticky, and some scroll animation 👨‍🍳

jhey ʕ•ᴥ•ʔ

206,779 просмотров • 6 месяцев назад

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); } }
0:30

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,871 просмотров • 2 лет назад