CSS scrolling Parallax

What is rolling parallax

Parallax Scrolling (Parallax scrolling) is a multi-layered background that moves at different speeds, creating a three-dimensional movement that results in a very good visual experience. As a hot trend in web design, more and more websites have applied this technology.

In general, scrolling parallax requires auxiliary Javascript at the front end to be implemented. However, the use of background-attachment can also achieve this effect.

To understand the role of background-attachment, you can refer to my other brief introduction to it:

What is Background-attachment

Using background-attachment:fixed for Rolling parallax

First, we use background-attachment:fixed to achieve rolling parallax. Fixed this keyword indicates that the background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background does not scroll with the contents 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 map has been pinned to its original location since the beginning.

We use, the text mix arrangement way, realizes the rolling parallax, the HTML structure follows,. G-word represents the content structure,. g-img represents the background picture structure:

Key CSS:

The effect is as follows:

Well? It's a bit magical, why is it so? Maybe a lot of people will be like me, the first contact with this property for this effect is confused.

Let's comment out the above background-attachment:fixed, or change to background-attachment:local, and then look at the effect:

This time, the picture normally follows the scroll bar scrolling, according to common sense, this effect is in line with our brain thinking.

And the rolling parallax effect, it is not in accordance with the common sense of the effect of a card, the focus is:

When the page scrolls to the position where the picture should appear, the picture that is set background-attachment:fixed does not continue to follow the scroll of the page and moves up and down, but is fixed dead relative to the viewport.

OK, let's try again, if all the. G-word content blocks are removed, only the background-attachment:fixed background block is left, what happens?

The effect is as follows:

Combined with this GIF, I believe I can have a deeper understanding of the background-attachment:fixed, moving only the viewport, and the background map is always fixed dead.

In a comprehensive way, CSS uses background-attachment:fixed to achieve rolling parallax, which is relatively easy.

Reference article: Scrolling parallax? CSS is a cinch

CSS scrolling Parallax