Some tips for CSS! Poor page Vision!

For quite some time now, the website and the so-called "parallax" effect have been very popular. In case you haven't heard of this effect, different images are moved in different directions or layers are mainly included. This leads to a good optical effect that makes the visitor's attention.

In web design, in order to implement this is a simple site to add a jquery plugin to the most common way. To do so, unfortunately, there are several drawbacks. These plug-ins are the target of attaching event handlers to the 滚动 event 窗口 this leads to event handling through JavaScript tons (processing 滚动 events can easily cause performance problems that should be carefully considered). The position of the above layer, image background gets calculated and set to different elements, and then another reason for many DOM operations.

In short: Parallax with JavaScript can reduce the scrolling performance of a website quickly.

background-attachment: fixed

What only very few people will know, this effect can be through CSS, too. Take a look at the following example:

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

To get this parallax effect, the background image is placed in different elements. These elements need to be defined separately background-attachment: fixed . By definition background-attachment and the positioning of any background image can be changed.

The initial value of the property scroll is basically, which means that the position of the image is a fixed element. There is no fancy, and we all know such an act. In a site and element users scroll up and down to make background images.

It becomes interesting to set up background-attachment:fixed . fixedthe position of the background image is defined as a dependent element that is not fixed to the viewport. This means that the image will be in the same position visually, no matter how scrolling will be done. This results in a good visual parallax effect.

Let's take a quick look at the actual implementation:

<!--Four containers for setting the background images -<Divclass= "Parallax">  <Divclass= "Bg__foo">Foo</Div>  <Divclass= "Bg__bar">Bar</Div>  <Divclass= "Bg__baz">Baz</Div>  <Divclass= "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);}

Almost global compatibility. It has been supported in IE9 and Android 2.1.

Summarize

I personally prefer CSS to solve JavaScript solutions and this is a perfect example of my preference. There is no logic to the need for additional DOM operations, which makes the whole solution very good. But there is one thing to remember when dealing with parallax effects.

Even though this CSS solution has a lot of things to do. background-attachment: fixedwill lead to more paintings that need to be done through the browser, which may affect performance and may degrade your FPS scrolling (remember the 60fps target?). ）。 So keeping an eye on FPS is always a good idea when doing these things with chrome.

Some tips for CSS! Poor page Vision!