Use CSS3 to achieve scrolling parallax effect

This article mainly introduces the tutorial of using CSS3 to achieve the scrolling parallax effect. It mainly uses the background-attachment attribute. Friends who need it can refer to it.

The "parallax (parallax)" effect is now more and more popular on the Internet. It's becoming more and more popular. If you haven’t heard of the parallax effect, it is actually an effect produced by using pictures to form different layers and moving them at different speeds and in different directions. This will produce a wonderful visual effect that can effectively attract the viewer's attention.

In web design, the most common way to achieve parallax effects is to use jQuery plug-ins. But this approach has some drawbacks. Most of these plug-ins place listeners on the scroll event of the window object. This will cause JavaScript to handle a large number of event triggers (handling scroll events can easily cause browser performance problems, so you need to be very careful when using it.) Moving different layers, calculating the position of the background, and setting the properties of the image all cause a lot of trouble DOM manipulation.

In short, using JavaScript to achieve the parallax effect will cause performance problems and lags in the scrolling of the page.

Background-attachment attribute review
background-attachment -- Define how the background image moves with the scroll axis
Value: scroll | fixed | inherit
scroll: The background image will move with the scroll axis of the page
fixed: The background image will not move with the scroll axis of the page
inherit: inheritance
Initial value: scroll
Inheritance: No
Applicable In: all elements
background: background.attachment: attachment.
Example

body    
{   
 background-image:url('list-orange.png');   
 background-attachment:fixed;   
 background-repeat:repeat-x;   
 background-position:center center;   
}

The background image of the screen is an orange line. As the scroll axis moves, the orange line The visual position remains unchanged.
CSS background-attachment property example

Use background-attachment: fixed to achieve parallax effect

Why only a small number of people know this This effect can actually be achieved using CSS.

In order to achieve the parallax effect, multiple background images must be placed on different elements. These background images need to be defined as background-attachment: fixed. By setting background-attachment, we can change the effect and position of the background image.

The default value of background-attachment is scroll, that is, the position of the background image and content is relatively static. We have all seen this, when we scroll up and down a web page, the background and content scroll together.

Things get interesting when background-attachment is set to fixed. Fixed means that the background image does not scroll with the content, but remains stationary with the window. That is, when you drag the scroll bar, the background image does not change. This creates a beautiful parallax effect.

Let me see a practical implementation:

<!-- Four containers for setting the background images -->   
<p class="parallax">   
  <p class="bg__foo">foo</p>   
  <p class="bg__bar">bar</p>   
  <p class="bg__baz">baz</p>   
  <p class="bg__bazz">bazz</p>   
</p>   
// setting base styles to image containers   
[class*="bg__"] {   
  height: 50vh;   
  text-indent: -9999px;   
  /* fix background */
  background-attachment: fixed;   
  /* center it */
  background-position: center center;   
  /* Scale it nicely to the element */
  background-size: cover;   
  /* just make it look a bit better  */
  &:nth-child(2n) {   
    box-shadow: inset 0 0 1em #111;   
  }   
}   
.bg__foo {   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg   
  );   
}   
.bg__bar {   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax2.jpg   
  );   
}   
.bg__baz {   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax3.jpg   
  );   
}   
.bg__bazz {   
  height: 100vh;   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg   
  );   
}

Regarding the browser compatibility of this technology, you can refer to here, basically, modern browsers and IE9 All browsers support it.

Personally, I prefer the parallax effect achieved by CSS technology rather than using JavaScript. It is implemented using CSS and is natively supported by the browser. There is no programming logic and no additional operations on the DOM, making the entire solution very simple and beautiful.

Even the parallax effect implemented by CSS will put a burden on the browser.

background-attachment: fixed will cause the browser to render more and will also affect the efficiency of browser scrolling. Therefore, you must do more testing during development to determine the effect based on performance.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to the use of CSS3 3D rotation rotate effect

Analysis of CSS float and position

How to use css3 to set a list separation line without upper and lower edges

The above is the detailed content of Use CSS3 to achieve scrolling parallax effect. For more information, please follow other related articles on the PHP Chinese website!