You probably noticed that more and more web developers are implementing what we call a parallax effect on their website. This effect allows you to make images or/and texts move in the page independently from the rest of the elements. In this tutorial we are going to apply a Parallax effect on the scroll event.
Demo
To see the demo of this tutorial in action just scroll the page down and up.
HTML
<div id="group-1">
<img id="elem1-1" src="images/airplane1.jpg" />
<img id="elem1-2" src="images/helicopter.jpg" />
</div>
<div id="group-2">
<img id="elem2-1" src="images/airplane3.jpg" />
<img id="elem2-2" src="images/airplane.jpg" />
</div>
<div id="group-3">
<img id="elem3-1" src="images/para.jpg" />
<img id="elem3-2" src="images/para.jpg" />
</div>
Every div tag is a group of images. For this example I have done it with three groups and two images in each group but you can add as much group as you want and as much element in each group as you like. Instead of images you can have plain text it will work the same way.
CSS
CSS style to position elements in the page.
#group-1, #group-2, #group-3 {
position: fixed;
left: 50%;
top: 0px;
}
#group-1 {
z-index: 1;
width: 350px;
margin-left: -350px;
}
#group-2 {
z-index: 2;
width: 0px;
margin-left: -300px;
}
#group-3 {
z-index: 3;
width: 940px;
margin-left: -470px;
}
#elem1-1, #elem1-2, #elem2-1, #elem2-2, #elem3-1, #elem3-2 {
position: absolute;
}
#elem1-1 {
top: 1800px;
left: 150px;
}
#elem1-2 {
top: 900px;
left: 320px;
}
#elem2-1 {
top: 400px;
left: 0px;
}
#elem2-2 {
top: 1600px;
right: 150px;
}
#elem3-1 {
top: -200px;
left: 900px;
}
#elem3-2 {
top: -800px;
left: 200px;
}
Here we add some CSS style for each group and for each element inside each group.
JQuery
$(document).ready(function(){
// We cache the Window object
$window = $(window);
$(window).on('scroll',function (){
// PART 1
// We set browsers prefix
if ($.browser.mozilla) { browserPrefix = '-moz-'; }
if ($.browser.webkit) { browserPrefix = '-webkit-'; }
if ($.browser.opera) { browserPrefix = '-o-'; }
if ($.browser.msie) {
browserPrefix = '-ms-';
ieVersion = parseInt($.browser.version, 10);
}
// PART 2
// We place the offset in the centre
var $this = $("#elem2-1");
var offset = $this.offset();
var width = $this.width();
var height = $this.height();
offset.left + width / 2;
offset.top + height / 2;
var scrolled = $(window).scrollTop();
var animVal = 1+(scrolled*.01);
// PART 3
// We apply the parallax effect to the elements
$('#group-1').css('top','-'+(scrolled*.80)+'px');
$('#group-2').css('top','-'+(scrolled*1.4)+'px');
$('#group-3').css('top',(scrolled*.50)+'px');
$this.css(browserPrefix+'transform', 'scale('+animVal+')').css('opacity','1'-(scrolled*.002));
});
});
“Part 3” is here everything happens. For the #group-1
and #group-2
we decrease the value of the top
CSS property what makes the planes towards the top when scrolling down.
For #group-3
it is the opposite, we increase the top
property what will
make the parachutists go down.
The element with the #elem2-1
id assigned to it will see its top
property
changed but also its scale
and opacity
. To modify the opacity
property we apply the same technic we did for the top
property.
We change the value on scroll event but here we add a starting value of 1
to make the element fully visible.
Now for the scale
we first need the “Part 1” of the script to verify which browser is being used and apply the right
prefix as we want this to be working with as much browser as possible(…am I right?). And finally we need the script in “Part 2” which places the offset in the centre of the element instead of top-left corner by default.
You can download the images for free right HERE for you to practice.