Some tips for css! The page is visually poor! _html/css_WEB-ITnose

For quite some time now websites with the so-called "parallax" effect have been popular. In case you haven't heard of this effect, different images are primarily included, moved or layered in different directions. This results in a nice optical effect that draws the visitor's attention.

In web design, the most common way to achieve this is by adding a jQuery plugin to a website which is simple. Doing this, unfortunately, has several drawbacks. These plugins attach event handlers to the window target of scroll events which results in tons of event handling via JavaScript (handling scroll events can easily cause performance issues and should be considered carefully). The position of the above layer, image background gets calculated and set to different elements, and then additionally causes a lot of DOM manipulation.

In summary: Parallax with JavaScript can reduce a website’s scrolling performance quickly.

background-attachment: fixed

What only few people will know is that this effect can be done via CSS, too. Take a look at the example below:

See the Pen Parallax with background-attachment : fixed by Stefan Judis (@stefanjudis) on CodePen.

To get this parallax effect, the background image is placed in a different element. These elements require additional definition of background-attachment: fixed. The positioning of any background image can be changed by defining background-attachment.

The initial value of the scroll attribute. Basically, this means that the position of the image is fixed for the element. Nothing fancy and we all know this behavior. Background image on a website and other actions as the user scrolls up and down.

Where it gets interesting is setting background-attachment: fixed. Fixed defines that the position of the background image is not fixed depending on the element but is fixed to the viewport. This means the image will be in visually the same position no matter how scrolling it will be done. This results in a nice visual parallax effect.

Let’s do a quick check on the actual implementation:

<!-- Four containers for setting the background images --><div class="parallax">  <div class="bg__foo">foo</div>  <div class="bg__bar">bar</div>  <div class="bg__baz">baz</div>  <div class="bg__bazz">bazz</div></div>// 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(    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg  );}.bg__bar {  background-image: url(    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax2.jpg  );}.bg__baz {  background-image: url(    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax3.jpg  );}.bg__bazz {  height: 100vh;  background-image: url(    https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg  );}

几乎全球兼容性。它已经在IE9和Android 2.1支持。

Summary

I personally prefer CSS solutions to JavaScript solutions and this is a perfect example of my preference. There is no logic and no additional DOM manipulation required, which makes the whole solution, great. But there is still one thing to keep in mind when dealing with the parallax effect.

Even this CSS solution has a lot to do. background-attachment: fixed will result in more painting that needs to be done by the browser, which may impact performance and potentially lower your FPS scrolling (remember the 60fps target?). So it's always a good idea to keep an eye on the FPS meter in Chrome when doing these things.