Using CSS3 to achieve scrolling parallax effect

This article mainly introduces the use of CSS3 to achieve the scrolling parallax effect of the tutorial, the main use of the Background-attachment attribute, the need for friends can refer to the following

The parallax (parallax) effect is now becoming more popular on the internet. If you haven't heard of the parallax effect, it is actually using the image to form different layers, moving at different speeds, in different directions, to produce the effect. This will produce a wonderful visual effect, which can powerfully attract the eyes of the visitors.

In web design, the most common way to achieve parallax is by using jquery plugins. But there are some drawbacks to this approach. Most of these plugins place listeners on the scroll event of the Window object. This causes JavaScript to handle a large number of event firings (handling scroll events can easily cause browser performance problems that require very careful use.) Move different layers, calculate the position of the background, set the properties of the picture, which all cause a lot of dom manipulation.

In short, using JavaScript to achieve parallax results in a performance problem with scrolling on the page, with the advent of Kaka.

Background-attachment Property Review
Background-attachment--Define how the background image moves with the scroll axis
Value: Scroll | Fixed | Inherit
Scroll: As the scroll axis background picture of the page will move
Fixed: The background picture will not move as the scroll axis of the page
Inherit: Inheritance
Initial value: Scroll
Inheritance: No
Applies to: 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's visual position is unchanged.
CSS Background-attachment Property Example

Using background-attachment:fixed to achieve parallax effects

Why only a small number of people know that this effect can actually be implemented in CSS.

To achieve parallax, multiple background images must be placed on different elements. These background maps 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 for Background-attachment is scroll, which is the position of the background picture and content is relatively static. We've all seen this, and when we scroll up and down a webpage, the background and content scroll together.

When you set background-attachment to fixed, things get interesting. Fixed means that the background image does not scroll with the content, but stays still with the window. That is, when you drag the scroll bar, the background picture does not change. This can produce a beautiful parallax effect.

Let me see an actual implementation:

<!--four containers for setting the background images-to <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.J   PG);     }. 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); }

For the browser compatibility of this technology, you can refer to here, basically, the modern browser and ie9+ browser are supported.

For me personally, I prefer the parallax effect of CSS technology rather than JavaScript. CSS implementation, is supported by the browser natively, no programming logic, no extra manipulation of the DOM, making the whole scheme very concise and beautiful.

Even the parallax effects of CSS implementations can be burdensome to the browser.

Background-attachment:fixed will cause the browser to render more, and it will also affect the efficiency of browser scrolling. Therefore, the development must do more testing, depending on the performance of the situation and determine the effect of the implementation.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!