What is rolling parallax

Parallax Scrolling means to create a three-dimensional Scrolling effect by allowing multiple backgrounds to move at different speeds. As a hot trend in web design, more and more websites are using this technology.

In general, scrolling parallax requires Javascript assistance on the front end. Of course, in fact CSS in the implementation of scrolling parallax effect, also has a good ability. Here are a few:

knowbackground-attachment

Background -attachment is a relatively rare attribute, basically usually write business style are not used this attribute. But it’s interesting in itself.

Background-attachment: If background-image is specified, then background-attachment determines whether the background is fixed in the viewport or scrolls along the block containing it.

Just from the definition of a little difficult to understand, with the following several Demo to understand what background-attachment exactly means:

background-attachment: scroll

The scroll keyword means that the background is fixed relative to the element itself, rather than scrolling with its content.

background-attachment: local

The local keyword indicates that 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.

background-attachment: fixed

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.

Notice scroll and fixed, one is fixed relative to the element itself, and the other is fixed relative to the viewport, similar to absolute and fixed for position.

You can feel the different effects of three different values:

CodePen Demo — bg-attachment Demo

usebackground-attachment: fixedImplement rolling parallax

First, we use background-attachment: fixed to implement rolling parallax. 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.

The key here is that even if an element has a scrolling mechanism, the background does not scroll with the content of the element. In other words, the background image has been fixed in its original position since the beginning.

The HTML structure is as follows:. G-word represents the content structure, and. G-img represents the background image structure:

<section class="g-word">Header</section>
<section class="g-img">IMG1</section>
<section class="g-word">Content1</section>
<section class="g-img">IMG2</section>
<section class="g-word">Content2</section>
<section class="g-img">IMG3</section>
<section class="g-word">Footer</section>
Copy the code

Key CSS:

section {
    height: 100vh;
}

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

The effect is as follows:

CodePen Demo — https://codepen.io/Chokcoco/pen/JBaQoY

Huh? It’s kind of amazing. Why is that? Many of you, like me, will be stunned by the effects of this property for the first time.

Background-attachment: fixed; background-attachment: local;

CodePen Demo — bg-attachment:local

This time, the image follows the scroll bar normally, which is how our brain works.

And the rolling parallax effect, it is not according to the common sense of a card effect, the key to:

When the page scrolls to the position where the image should appear, the image with background-attachment: fixed will not continue to move up and down as the page scrolls, but is fixed relative to the viewport.

If we remove all the.g-word content blocks and only the background-attachment: fixed background block is left, what will happen?

The HTML code is as follows:

<section class="g-img">IMG1</section>
<section class="g-img">IMG2</section>
<section class="g-img">IMG3</section>
Copy the code
section {
    height: 100vh;
}

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

The effect is as follows:

CodePen Demo

Combined with this GIF, I believe we can have a deeper understanding of background-attachment: fixed. Only the viewport moves, while the background image is always fixed.

To sum up, it is a way for CSS to use background-attachment: fixed to achieve scrolling parallax, and it is relatively easy. Of course, background-attachment: fixed itself can not only be used to achieve the scrolling parallax effect, but also achieve many other interesting effects. Here is a simple list:

background-attachment: fixedAchieve the image click water grain effect

Using images that are fixed relative to the viewport can have many interesting effects, such as this one from this article CSS Water Wave:

CodePen Demo — bg-attachment:fixed Wave

Using the picture relative to the fixed characteristics of the viewport to achieve click water pattern effect.

The above effect is a bit flawed as the image wobbles noticeably when the container is enlarged. Of course, the effect can still be, there are many interesting effects of background-attachment can be mined.

usetransform: translate3dImplement rolling parallax

Without further ado, here is another scrolling parallax effect implemented using CSS, using CSS 3D.

The principle is:

  1. Transform-style: preserve-3D; perspective: XPX;

  2. Transform: translateZ() : translateZ() : translateZ() : translateZ() : translateZ() : translateZ() : translateZ(

  3. Scroll bars, because the child element is set to a different transform: translateZ(), then they scroll up and down the distance from the translateY relative to the screen (our eyes) is also different, which reaches the scrolling parallax effect.

Transform-style: preserve-3D and Perspective this article will not expand too much. By default, readers will understand the transform-style: preserve-3D and Perspective.

The core code representation is:

<div class="g-container">
    <div class="section-one">translateZ(-1)</div>
    <div class="section-two">translateZ(-2)</div>
    <div class="section-three">translateZ(-3)</div>
</div>
Copy the code
html { height: 100%; overflow: hidden; } body { perspective: 1px; transform-style: preserve-3d; height: 100%; overflow-y: scroll; overflow-x: hidden; } .g-container { height: 150%; .section-one { transform: translateZ(-1px); } .section-two { transform: translateZ(-2px); } .section-three { transform: translateZ(-3px); }}Copy the code

Transform-style: preserve-3d; perspective: 1px; transform: translateZ;

CodePen Demo — CSS 3D parallax

Obviously, when scrolling the scrollbar, the degree of displacement of the different child elements is visually different, resulting in the so-called scrolling parallax effect.

Scroll parallax text shadow/shadow effect

What can you do with the parallax effect of Translate3D? Here’s an interesting scrolling parallax text shadow/shadow effect:

CodePen Demo — CSS translate3d Parallax

Of course, by adjusting parameters (perspective:? Px and transform: translateZ(-? Px); , and other interesting effects can occur:

CodePen Demo — CSS translate3d Parallax 2

Does it feel like the special effects of the opening manufacturer’s LOGO? Joy:.

Master led the way, but it is my personal practice. How to make better and more interesting effects still needs time to study and ponder. Here I just throw out a brick to introduce jade, hoping to see more Nice effects.

The last

Thank you for your patience. More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

Well, the end of this article, I hope to help you 🙂

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.