DEV Community

Kai Nguyenx
Kai Nguyenx

Posted on

How to create parallax scroll effect counting floors of a building with image using JS?

Does anyone here have experience with parallax scrolling to count floors of a building? =))
When scrolling, it will count floors according to the ratio of the scrolled image, but I'm having problems with responsiveness. When changing the window size, the image ratio changes, leading to errors in counting because I use getBoundingClientRect() to get the parameters of the element (I use png format for the image).
I also thought of a second solution, which is to blend it into a 3D video and then use GSAP's ScrollTrigger to control the video, but it's not feasible because I don't know how to make videos =))
I remember there was a website about the Empire State building in NYC that also used the parallax scroll counting effect.
Does anyone have a solution?

Top comments (0)