Smooth Parallax Scrolling Using CSS And JS

Posted By : Gaurav Arora | 21-Sep-2017

css

Hi, as we all know that Parallax scrolling is a common thing in almost every single app. Some People use jquery or other kind of plugins for this scrolling effect. In this blogs we are going to create the same scroll effect to our page’s content with a small piece of code. As it makes our content more attractive. For this what we will require, A simple HTML Structure, some common CSS properties and a javascript function to make our code come live in action.

First of all we will start by creating our HTML Structure.

After that we will write some CSS properties to give some look and feel to our structure.

        .parallax {
            width: 100%;
            float: left;
            height: 500px;
            background-image: url();
        }
        .parallax .content{
            position: relative;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -mox-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        .parallax p {
          color: #1e1e1e;
          font-size: 20px;
          text-align: center;
        }

You can modify the structure as per your requirement.

Now we write our function to create the effect.

        (function(){
          var parallax = document.querySelectorAll(".parallax"),
          speed = 1;
          window.onscroll = function(){
            [].slice.call(parallax).forEach(function(element,i){
              var windowOffset = window.pageYOffset,
              scrollPosition = "0 " + (windowOffset * speed) + "px";
              element.style.backgroundPosition = scrollPosition;
            });
          };
        })();

You can modify the speed as per your requirement.