Smooth Parallax Scrolling Using CSS And JS
Posted By : Gaurav Arora | 21-Sep-2017
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.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Gaurav Arora
Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.