Creating Scrolling Parallax Effects with CSS

For pretty a long time now websites with the so referred to as “parallax” effect have been simply famous. In case you have not heard of this impact, it basically includes distinctive layers of pics which might be moving in distinct directions or with specific pace. This ends in a pleasing optical effect and continues the attention of the vacationer.

In internet design, the most common manner to attain that is by way of clearly adding a jQuery plugin to a website. Doing this unluckily has some risksthose plugins mostly attach an event handler to the scroll occasion of the window item. This ends in tons of occasions being treated through JavaScript (dealing with the scroll event can without problems cause performance troubles and have to be taken into consideration carefully). to move the mentioned layers, background positions of pix get calculated and set to the depending elements, which then moreover causes a number of DOM manipulations.

In brief: parallax achieved with JavaScript can decrease the scrolling performance of a website quite quick.

Use a container element and upload a background image to the field with a particular height. Then use the background-attachment: fixed to create the real parallax impactthe alternative historical past properties are used to center and scale the picture perfectly:

 


.parallax {
/* The image used */
background-image: url("img_parallax.jpg"); /* Set a specific height */ min-height: 500px; /* Create the parallax scrolling effect */
 background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

 

Please follow and like us:



Leave a Comment

Your email address will not be published. Required fields are marked *