CSS complete parallax scrolling effect

1. What is

Parallax scrolling refers to the movement of multiple layers of background at different speeds, creating a three-dimensional motion effect and bringing an excellent visual experience.

We can break down the web page into: background layer, content layer, floating layer

When you scroll the mouse wheel, each layer moves at a different speed, creating a visual difference effect.

2. Implementation

There are several ways to use CSS to achieve the parallax scrolling effect:

• background-attachment
• transform:translate3D

background-attachment

The function is to set whether the background image is fixed or scrolls with the rest of the page

The values ​​are as follows:

• scroll: The default value, the background image will move as the rest of the page scrolls
• fixed: The background image does not move when the rest of the page scrolls
• inherit: inherits the value of the parent element's background-attachment attribute

To achieve scroll parallax, you need to set the background-attachment property to fixed so that the background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background will not scroll with the content of the element

In other words, the background is fixed at its initial position.

The core CSS code is as follows:

section {
    height: 100vh;
}

.g-img {
    background-image: url(...);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

The overall example is as follows:

<style>
div {
            height: 100vh;
            background: rgba(0, 0, 0, .7);
            color: #fff;
            line-height: 100vh;
            text-align: center;
            font-size: 20vh;
        }

        .a-img1 {
            background-image: url(https://images.pexels.com/photos/1097491/pexels-photo-1097491.jpeg);
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
        }

        .a-img2 {
            background-image: url(https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg);
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
        }

        .a-img3 {
            background-image: url(https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg);
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
        }
</style>
 <div class="a-text">1</div>
    <div class="a-img1">2</div>
    <div class="a-text">3</div>
    <div class="a-img2">4</div>
    <div class="a-text">5</div>
    <div class="a-img3">6</div>
    <div class="a-text">7</div>

transform:translate3D

Similarly, let's first look at the two concepts transform and perspective:

• transform: CSS3 attribute, which can transform elements (2D/3D), including translation, rotation, scale, etc.
• perspective: CSS3 attribute, when the element involves 3D transformation, perspective can define the 3D stereoscopic effect seen by our eyes, that is, the sense of space

The 3D perspective diagram is as follows:

For example:

<style>
    html {
        overflow: hidden;
        height: 100%
    }

    body {
        /* The parent of the parallax element needs a 3D perspective */
        perspective: 1px;
        transform-style: preserve-3d;
         height: 100%;
        overflow-y: scroll;
        overflow-x:hidden;
    }
    #app{
        width: 100vw;
        height:200vh;
        background:skyblue;
        padding-top:100px;
    }
    .one{
        width:500px;
        height:200px;
        background:#409eff;
        transform: translateZ(0px);
        margin-bottom: 50px;
    }
    .two{
        width:500px;
        height:200px;
        background:#67c23a;
        transform: translateZ(-1px);
        margin-bottom: 150px;
    }
    .three{
        width:500px;
        height:200px;
        background:#e6a23c;
        transform: translateZ(-2px);
        margin-bottom: 150px;
    }
</style>
<div id="app">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</div>

The principle of achieving visual difference in this way is as follows:

• If the container is set to transform-style: preserve-3d and perspective: xpx, then the child elements in this container will be located in 3D space.
• Sub-elements set different transform: translateZ(). At this time, the distance between different elements and the screen (our eyes) in the 3D Z axis direction is different.
• When scrolling the scroll bar, since the child elements have different transform: translateZ(), the up and down distances of their scrolling translateY relative to the screen (our eyes) are also different, which achieves the effect of scrolling parallax.

The above is the details of how to use CSS to achieve parallax scrolling effect. For more information about CSS parallax scrolling effect, please pay attention to other related articles on 123WORDPRESS.COM!