A tutorial on using CSS3 to achieve scrolling parallax effects

The "Parallax (parallax)" effect is now increasingly popular on the internet. If you've never heard of a parallax effect, it's actually using pictures to form different layers, moving in different speeds and in different directions. This will produce a wonderful visual effect, can powerfully attract the viewer's eyes.

Watch Demo

In web design, the most common way to achieve parallax effect is to use the jquery plug-in. But there are some drawbacks to this approach. Most of these plug-ins place listeners on the scroll event of the Window object. This can cause JavaScript to handle a large number of event triggers (handling scroll events can easily cause browser performance problems and need to be very careful when used.) Move different layers, calculate the position of the background, set the properties of the picture, which causes a lot of DOM operations.

In short, using JavaScript to achieve parallax effects can cause scrolling performance problems in the page, and there is a card.

Background-attachment Properties Review

Background-attachment--Define how the background picture moves with the scroll axis

Value: Scroll | Fixed | Inherit

Scroll: With the scrolling axis background picture of the page will move

Fixed: The background picture will not move as the scroll axis of the page

Inherit: Inheriting

Initial value: Scroll

Inheritance: No

Apply to: all elements

Background: background. Attachment: Attachment.

Example

CSS code copy content to clipboard

Body

{

Background-image:url (' list-orange.png ');

background-attachment:fixed;

Background-repeat:repeat-x;

Background-position:center Center;

}

The background picture of the screen is an orange line. As the scroll axis moves, the visual position of the Orange Line is unchanged.

CSS background-attachment Properties Sample

Using background-attachment:fixed to achieve parallax effect

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

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

The default value of the background-attachment is scroll, where the background image and content are relatively static. We've all seen this, and when we scroll up and down a page, the background and content scroll together.

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

Let me see a practical implementation:

CSS code copy content to clipboard

　　

　　

　　

Foo

　　

Bar

　　

Baz

　　

Bazz

　　

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

);

}

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

Watch Demo

For me personally, I prefer the parallax effect that CSS technology achieves, not JavaScript. Implemented with CSS, is natively supported by browsers, no programming logic, no additional operations on the DOM, making the whole program very simple and beautiful.

Even the parallax effect that the CSS realizes, also can bring the burden to the browser.

Background-attachment:fixed can cause browsers to render more and also affect the efficiency of browser scrolling. Therefore, the development must do more testing, depending on the performance of the decision to achieve the effect.