Parallax Effect with Cross Browser Compatibility

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="parallex-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 parallex 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.parallex-bg {
padding: 100px 0;
border: none;
background: none;
color: #FFF;
}

Reference

Original post here — http://www.addwebsolution.com/blog/parallax-effect-cross-browser-compatibility

Like what you read? Give AddWebSolution a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.