Parallax Scrolling refers to the multi-layer background moving at different speeds to form three-dimensional motion effect and bring excellent visual experience.

Parallax scrolling is commonly used in several ways: 1. Taking the page scroll bar as the progress bar, it moves through the background layer/content layer/suspension layer at different speeds to form the effect of parallax; 2. Use “scroll scale” as “animation frame degree”; 3, listen to the mousewheel event, each time the scroll wheel turns a page.

CSS implementation

CSS can be implemented in two ways: background-attachment: fixed or Transform: translate3D

1, background-attachment: fixed parallax implementation

Background-attachment determines whether the position of the background image is fixed in the viewport or scrolls along with the block containing it. Fixed: indicates that the background is fixed with respect to the viewport. Even if an element has a scrolling mechanism, the background does not scroll with the content of the element. Scroll: The background is fixed relative to the element itself, rather than scrolling with its content (this is valid for element borders). Local: The background is fixed relative to the content of the element. If an element has a scrolling mechanism, the background will scroll along with the content of the element, and the drawing and positioning areas of the background are relative to the scrollable areas rather than the borders that contain them.

Scroll and fixed, one is fixed relative to the element itself, the other is fixed relative to the viewport, somewhat similar to position position absolute and fixed.

Principle: When background-attachment: fixed, it will not scroll with the background even if the background has a scrolling mechanism

Code:

<ul>
    <li class="p-img"></li>
    <li class="p-word">one</li>
    <li class="p-img"></li>
    <li class="p-word">two</li>
    <li class="p-img"></li>
    <li class="p-word">three</li>
    <li class="p-img"></li>
    <li class="p-word">four</li>
</ul>
Copy the code
.p-img{
    width:100%;
    height:500px;
    background-size: cover;
    background-attachment: fixed;
}
Copy the code

The effect

If I change it to background-attachment scroll, it looks like this

2, transform-style: preserve-3D

Transform-style: Flat (default) child elements will not retain their 3D position. Transform-style: Preserve-3D child element will retain its 3D position. After the parent element is set, the child element can be 3D deformed relative to the plane of the parent element. Perspective: number | none of three-dimensional perspective distance, only applies to the offspring of the elements, rather than the element itself.

The principle of

  • The container is settransform-style:preserve-3dandpreserve:[x]px, the child elements of the container are in 3D space; (preserve:[x]pxTo be added to the rolling container)
  • And set different ones for the child elementstransform:translateZ()At this point, the distance of different elements from the screen in the 3D Z-axis direction will be different;
  • Scroll the scrollbar, because the child element is set differentlytransform:translateZ()So how far up and down they rolltranslateYAchieve parallax effect relative to screen difference.

The larger the translateZ setting is, the closer it is to the field of view, the bigger it looks, and the faster it slides (positive Settings are not displayed)

code

<div id="app">
   <div class="one">one</div>
   <div class="two">two</div>
   <div class="three">three</div>
</div>
Copy the code
body {
   perspective: 1px;
   -webkit-perspective: 1px;
   height: 100%;
   overflow-y: scroll;
   overflow-x: hidden;
 }
 #app{
   width: 100vw;
   height:200vh;
   transform-style: preserve-3d;
   perspective-origin: 100% 50%;

 }
.one{
  width:500px;
  height:500px;
  background:#409eff;
  transform: translateZ(-2px);
  -webkit-transform:translateZ(-2px);
}
.two{
  width:500px;
  height:500px;
  background:#67c23a;
  transform: translateZ(-1px);
  -webkit-transform:translateZ(-1px);
}
.three{
  width:500px;
  height:500px;
  background:#e6a23c;
  transform: translateZ(0px);
  -webkit-transform:translateZ(0px);
}
Copy the code

! [transform: translateZ(-1px)scale(2)] [transform: translateZ(-1px)scale(2)]

Combine the two

Scroll trigger animation

There is a very useful plugin called GSAP used here

Zhan Keng Ming er write ~

Parallax case

usatoday.geex-arts.com/

davegamache.com/parallax/

. Want to run/https://rem…