Kevin Powell - Community•11mo ago

CSS Scroll Animation

I have multiple layers of this image. I want, on scroll the image zoom between 2 towers and fade out and fade in another image. 1 solution is, to animate this graphic using an editing tool and get the video file and convert the video to images, and then load these images in canvas frame by frame when scrolling is there another way without animating this image using editing tool?

5 Replies

Kevin Powell•11mo ago

Very simply, something like this would work. Whatever you planned on using to control the frame of the video would be used to control where you are in the animation.

@keyframes buildings {
  0% { scale: 1; opacity: 1; }
  100% { scale: 5; opacity: 0; }
}

@keyframes new-image {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes buildings {
  0% { scale: 1; opacity: 1; }
  100% { scale: 5; opacity: 0; }
}

@keyframes new-image {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

If it's for a personal project, i'd just use scroll-timeline and CSS to do it. If it's for production, then you'd want to use a JS solution that can keep track of the scroll position.

johnny d•11mo ago

Love the concept, in fact was wanting to do something similar but just make it look like you're scrolling through clouds so I'm excited to see the outcome!

Mozi47OP•11mo ago

I was trying something different. https://codepen.io/mozi47/pen/yLwdJKj

Muzakir Shah

CodePen

yLwdJKj

...

Kevin Powell•11mo ago

This video might give you some ideas, it sort of does the zoom thing: https://www.youtube.com/watch?v=UmzFk68Bwdk

Mozi47OP•11mo ago

Thank you Kevin. I was trying this animation. https://65d8acd8aeab2e0cd30843b0--strong-monstera-9ba850.netlify.app/ I am going to watch that video now.

Gaming

Programming

CSS Scroll Animation