Pure CSS Implementation scrolling effect instance code

The principle of the

CSS Implementation

is very simple, and the following key CSS declarations work (red highlights):

code is as follows

copy code

. Container {    /* Rolling container */     perspective:1px;     padding:0; Height:calc (100vh-300px); overflow:auto; } . Box {    /* The parent of the Parallax element requires a 3D perspective */     height:1280px;     ; transform-style:preserve-3d;     position:relative; } . background {    /* scrolling slower background elements */     position:absolute; left:50%;     Transform:translate3d ( -50%, -120px, -1px) scale (2); }

You can note that the red highlight code above shows a 1px (from perspective), a -1px (from transform), and 2 of scale (2). What is the relationship between these numbers?

Let's take a look at the 3D view diagram below.

When we are in the front of the screen 1 units, look at the 1 units behind the screen, the naked eye of the picture size of the actual 1/2, that is, the so-called near the big far small. At this point scale (2) to enlarge the content to the original twice times, just on the plane looks like the original size.

Although the volume of the body appears to be 1:1, but the change in the rotation of the shift is still 1:2, should be well understood. To give an extreme example, we sit on the battery car to see the moon, although the vehicle at 40 yards speed rush, but, as if the position of the moon has not moved, has been on top of the head. The 3D in the Web page is a simulation of the real world 3D effect, so there will also be this parallax experience.

Or so to speak, the CSS3 3D natural parallax effect, scrolling, is only the parallax embodiment of a trigger condition.

So, dear classmate. What if you want to achieve 3-layer parallax scrolling? Very simple, a Transform:translatez ( -2px) to try ~

Conclusion

According to my test, direct body or HTML scrolling seems to be difficult to achieve parallax scrolling effect, but it is late, I did not delve into, interested in the small partner can study and share under.

OK, just like gorgeous magic, after decryption, will find mediocre. I wonder if you have successfully decrypted the secret of CSS parallax scrolling?