Parallax Scrolling Effect With JQuery

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.

airplane parrallax effect helicopter parrallax effect
airplane parrallax effect airplane parrallax effect
para parrallax effect para parrallax effect

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.

Leave a Reply

Your email address will not be published. Required fields are marked *