Ask how to realize the JavaScript effect when scrolling.

what I saw before, it should be the page of a product of Xiaomi, or it could be the page of other brands of mobile phones, but I haven"t found it for a long time.
the specific effect is that when you scroll down the mouse wheel, it is only a normal page scroll, but when you scroll down to a place, the visual effect is that the picture scrolls horizontally, but the right scroll bar still scrolls down. What"s even more amazing is that if you scroll up, the horizontal scrolling effect of the picture will fall back. In other words, the animation on the page corresponds to scrolling one by one, scrolling stops, the animation stops, scrolls back, and the animation plays forward. Meituan takeout product list page also has this effect. May I ask how this effect is achieved? The way I came up with this is to figure out the relationship between the scrolling distance and the animation parameters, such as scrolling from 0 to 200, and the box width is finally 400, then set the box width to scrollTop*2, and listen for scrolling events. Is that right?

there is another area on the other page where I don"t know how to implement it. After scrolling down to one place, the same effect changes from normal scrolling to other effects, but the scrolling speed suddenly becomes very slow, and after this period, the scrolling speed returns to normal. How do you do this? Why is it not uniform?

ask for another page

Apr.29,2021

since you have an idea, why not give it a try?

in addition, this parallax scrolling is basically composed of the distance between monitoring and page scrolling to set the animation effect of a piece. You can also see that js is formed by constantly changing the vision of the page when you trigger an event. Good Luck!

Menu