Parallax scrolling is a technique in computer graphics and web design, creating an illusion of depth in a 2D scene and adding to the immersion.The parallax effect has been around for years in classic video games. This cool effect is now commonly seen as part of the scrolling feature of a web page. It uses multiple backgrounds which seem to move at different speeds to create a sensation of depth (creating a faux-3D effect) and an interesting browsing experience.
In various cases this effect has found to be not working properly across many mobile devices and in safari browser, however, after using the below explained method you should not face that issue.
I will now explain the procedure step-by-step.
1) Construct the html structure as follows:
<body>
<div id="skrollr-body">
<div>Content ......</div>
<div class="bg" data-0="background-position:0px 0px;" data-100000="background-position:0px -50000px;">
<div class="skrollr-body">
<div id="center" class="parallax-bg">
<h2>What is Lorem Ipsum?</h2>
<div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s....</div>
</div>
</div>
</div>
<div>Content ......</div>
</div>
</body>
2) Add JS library ‘skrollr.min.js’ and use the following script
skrollr.init({
forceHeight: false
});
3) Use the following css to design bg parallax image
.bg { background:url(images/ptn1.jpg) repeat; }
.skrollr-body { background-color: rgba(0, 0, 0, 0.2); }
#center {
background:#f9f9f9;
background:rgba(240,240,240,.7);
width:90%;
padding:1em;
margin:1em auto;
border:1px solid #bbb;
}
#center.parallax-bg {
padding: 100px 0;
border: none;
background: none;
color: #FFF;
}
Reference
Hope this blog is quickly and easily guide to for parallax effect on your website. Need more assistance regarding Web Design Services Contact us now!
Share
