javascript - Ask about the implementation of page parallax effect

Question

Page effect:

Jingzhe

About the imitation of this effect:

I first learned about a library called skrollr.js on Zhihu, and learned and applied it to my own page. Since my page is not a static node like the one above, articles and pictures are requested and are The step-by-step request relies on the onload event of img to render a set of (article + background image) templates and append them to the page. The initial implementation was to stack all background images on the screen using fixed positioning, and use skrollr to make css attribute status changes based on reference objects to achieve the effect. But in fact, even if no effects are written, as long as there is an initialization function of skrollr.js, it will not work on the Android machine. The author of skrollr.js also pointed out, as shown below:

Later, I carefully observed the effect of the Jingzhe page upstairs and found:

1. Each parent block within the container is absolutely positioned and left: 0 top: 0 right: 0 bottom: 0

2. The container uses a similar kinetic library to use touch events and translate to simulate scrolling. . . Effect demo: demo

doubt:

1. How does he achieve the parallax effect, although he sees the z-index attribute

2. His translate basically removes the height of one screen, and then the following pages come up. . . How to do this, please explain in detail

Answer 1

All absolutely positioned, the scroll bar on the right is simulated. At the same z-index height, subsequent elements will automatically cover previous elements.

So just change the subsequent translate according to the scrolling state. You can understand it as one card covering another card.

To put it simply, when you first scroll, move the elements on the second screen upward. When it reaches more than one screen, start the second screen, and so on.

The following are some effects such as zooming in and out of the background image.