Parallax Scrolling

      No Comments on Parallax Scrolling

Parallax Scrolling is a technique where the background content (i.e image) is moved at a speed lower than that of the content in foreground while scrolling.

How to create Parallax Scrolling effect

Use a container element (i.e div) and add background image to it. Use another container element that holds the content to be displayed over the parallax.

 <div class="parallax"></div>
    <div class="content-parallax">
      <span></span>
    </div>

Use the background-attachment: fixed to create the actual parallax effect. Other background properties are used to center and scale the image perfectly.

/* parallax */
.parallax {
    background-image: url('../img/paralax1.jpg');
    height:100%;width:100%; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Demo:

See the Pen demo parallax by scanfcode (@scanfcode) on CodePen.

You can also check for a working example of parallax scroll DEMO

Leave a Reply

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