Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 👇)

166,189 görüntüleme • 2 yıl önce •via X (Twitter)

9 Yorum

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈2 yıl önce

Not that happy with it 💯 But the itch is scratched 😅 Onto the next demo! 🤙 Think WebGL gets you the smoothest result. Jus need to be mindful of readability for users etc.

˗ˏˋ rogie ˎˊ˗ profil fotoğrafı
˗ˏˋ rogie ˎˊ˗2 yıl önce

This is so hot

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈2 yıl önce

The WebGL is undoubtedly smoother 💯 Would be interested to see how it's been applied though. If it's all canvas then you lose the readability 🤔 CSS has it's limits for sure with some of these. GSAP ScrollTrigger likely gets a not bad result.

Dark Code profil fotoğrafı
Dark Code2 yıl önce

Sheesh, that looks so good!

Mable Lisabeth profil fotoğrafı
Mable Lisabeth2 yıl önce

Sheesh, that lookis sg good!

allthings.framer profil fotoğrafı
allthings.framer2 yıl önce

Waiting for the awwwards people to come and start hating on this because you are stealing a design.

Max Barvian profil fotoğrafı
Max Barvian2 yıl önce

So cool! How did you break the images out of the list items? I did the same thing with this slider but hit some bugs when the list item was close to 100% the width of the container (not pictured)

Jan profil fotoğrafı
Jan2 yıl önce

wow, looks really good

Hams profil fotoğrafı
Hams2 yıl önce

X tabs looks like a p0rn website tabs 🤧🤦‍♂️ So .... Great & Amazing work 🙌

Benzer Videolar

CSS Tip! ✨ You can create these parallax effects and image cross-fades with scroll-driven animations 🤙 img { animation: fade; animation-timeline: view(); mix-blend-mode: plus-lighter } img:last-of-type { animation-direction: reverse; } @​keyframes fade { to { opacity: 0; }} This one's fun! 😁 The trick with the cross-fading image is to make use of one animation that runs at the same time on two images inside a container. You use the same animation, animation-timeline, and animation-range. But, you use animation-direction: reverse on one of the images so they go in the opposite direction 🫶 The use of mix-blend-mode: plus-lighter; produces a better cross-fade result 💯 A viewTimeline (view()) works because you know that both images are the same height. The range you can use is img { animation-timeline: view(); animation-range: cover 45% cover 55%; } That means when the image has covered 45% of the scrollport (In this case, the window), start the animation. And finish when it has covered 55% 🎬 How about the slight parallax? This is a trick with calc(). You know the top of the small image and the big image line up. And you can do this by absolutely placing the caption outside of the small image. The trick is to translate the small image by a distance so it lines up with the bottom of the big image. You can do that like this :root { --catch-up: calc( var(--big-height) - var(--small-height) ); } @​keyframes move { to { translate: 0 var(--catch-up); }} Then drive that animation with a scroll-driven animation using the container of both images as the driver 🤙 /* section contains both images */ section { view-timeline: --container; } .img-fader { animation: catch-up both linear; animation-timeline: --container; animation-range: 50vh calc(100vh + (var(--big-height) * 0.25)); } That's it! Scroll-driven image cross-fading and parallax effects without any JavaScript. This demo will work in all browsers as there is some JavaScript in place where the API isn't supported 🤙 To do that, it uses GSAP ScrollTrigger 🏆 As always, any questions, requests, etc. hit me up! 🤙 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

242,016 görüntüleme • 2 yıl önce

CSS Trick! ⚡️ You can use scroll-driven animation with background-attachment to create a dynamic glowing card scroller without JS 🔥 section { animation:vibe; animation-timeline:--list; } @​keyframes vibe { to{--hue:320;}} .glow {background: hsl(var(--hue) 80% 50%);} Here's how! 🤙 You can use the background-attachment trick used in other glow card demos 😎 article { background-attachment: fixed; } The difference here is that you aren't going to update the fixed background position with your pointer this time. It can remain fixed. The magic part is that as you scroll, the background will leave the card that's leaving and enter the card that's entering ✨ For the extra background glow, you can use a fixed pseudo element on the list container itself 💪 Once that's in place, you're only task is to change the color of the background as you scroll 🤔 Create a custom property declaration for the --hue @​property --base { inherits: true; syntax: ' '; initial-value: 0; } Then create an animation that updates this value @​keyframes accent { to { --hue: 320; }} The last piece is hooking it up to scroll and there is a little trick in here 👀 First, you need an inline scroll-timeline on the list ul { scroll-timeline: --list inline; } Then you can use timeline-scope to hoist that scroll-timeline up so a parent can use it. You then animate the custom property on this element and let the value cascade down to the places that need it 🔥 section { timeline-scope: --list; animation: accent both linear; animation-timeline: --list; } For example, the glow uses the --hue this way [data-glow] { background-image: radial-gradient( 150px 150px at 50% 50%, hsl(var(--hue) 100% 70% / 0.25), transparent ); } Lastly, scroll-snap is optional of course but plays nice with the scroll-driven animation demos ✨ The key for that is ul { scroll-snap-type: x mandatory; } li { scroll-snap-align: center; } That's it! Pretty fun trick to play with! 🤓 Any questions, let me know! Should we add it to the video walkthrough list? CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

116,462 görüntüleme • 2 yıl önce