Previously: This article has assumed that you have thoroughly understood the meaning and usage of Perspective and translateZ. If not, I recommend you to read the cSS3 series for detailed perspective
Part1 What is parallax rolling?
Finally, the formation of multiple DIV rolling distance is not consistent, reflecting the effect of “parallax”, simply speaking, is parallax rolling, its principle is the rolling speed is not consistent!
What good is that, you ask? Then you can try visiting this websitewww.firewatchgame.com/
Is it more cool than ordinary websites? Want to know how to do that? Let’s move on to part2.
Part2 implementation of parallax rolling
Step: 1. Create a container element and set overflow-y: Scroll to scroll (and possibly overflow-x: hidden).
2. For the above elements, we apply a perspective value and set perspective-Origin to top left, or 0, 0.
3. Apply a z-transform to the children of the above element, and then revert them back to the parallax effect without affecting their size on the screen. CSS and HTML under this scheme:
.container {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
perspective: 1px;
}
.parallax-child {
transform: translateZ(-2px) scale(3);
}
Copy the codeIsn’t that easy?
<div class="Container" > < div class ="parallax-child"></div>
</div>
Copy the codeNow you have written the basic parallax scrolling animation! But how do perspective and translateZ affect scrolling speed? And scale, why is it 3 here? Want to know? Then move on to part3
Part 3 Principle analysis
Here set scale to S, pespcetive->P,translateZ->D //Notice that D is usually negativeSo there’s a formulaS=(P-D)/PWhere does this formula come from? This is just a simple similar triangle
The scale of the red line is 1:3, so all you have to do is zoom in by 3 to get it back to its original scale, where 1 is P and 2 is D, so it’s easy to see that the scale is P over (p-d). Want to zoom back? Now we’ve scaled the graph back to its original size using the scale property. Everything seems to be back to its original size, but the one thing that has changed is the scroll speed. The scroll speed is exactly the same as the scale above
Parent element perspective: 1px; Child element transform: translateZ(-2px) scale(3);Copy the codeRegardless of the scale, it’s shrunk by 1/3, so it’s also going to scroll 1/3 faster because of the CSS mechanism. Even if you add the scale property, it still scrolls at a third of its original speed.
Now let’s summarize the properties: the parent sets perspective and the child sets translateZ(-2px), so whether or not there is a scale attribute, there is
Reduction ratio = rolling speed ratio =P/(p-d)
PS: If translateZ is not set, or translateZ(0), then D=0, so there is reduction ratio = rolling speed ratio =(P/P-0)=1:1, that is, relative to the original rolling rate remains unchanged.
In order to facilitate readers to try, I code a small demo, you can arbitrarily change the attribute to verify the above conclusion!
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<style>
html.body {
margin: 0;
font-family: Helvetica, "PingFang SC"."Microsoft Yahei", sans-serif;
background:#00b894;
display: flex;
justify-content: center;
align-items:center;
height:100vh; {} *box-sizing: border-box;
}
.container {
width: 50vh;
height: 50vh;
overflow-x: hidden;
overflow-y: scroll;
perspective: 1px;
}
.parallax-child {
width:50vh;
height:50vh;
border:1px solid black;
/* transform-origin: 0 0; * /
transform: translateZ(-2px) scale(3);
background:rgba(255.255.255.0.5)}.another{
width:50vh;
height:50vh;
border:1px solid black;
background:rgba(0.0.0.0.5)}</style>
</head>
<body>
<div class="container">
<div class="parallax-child"></div>
<div class="another">2333333333333333</div>
</div>
</body>
</html>
Copy the codeReference:
Performant Parallaxing: developers.google.com/web/updates…
[Yang Geng] explanation the perspective of the CSS 3 series: www.cnblogs.com/yanggeng/p/…