Parallax Effect

Parallax Scroll Window Offset

The saga continues.

In this second tutorial, i’ll show how to create the Parallax effect by scrolling the window.

This type of Parallax effect has a small problem, though it is quite simple to implement, if we have a website with many elements under a Parallax effect, it can be a little slow and heavy.

In future I will release a tutorial using Parallax inside HTML Canvas, which will show a more advanced effect of Parallax, but for now let this.

Parallax Scroll Window Offset

This Parallax effect is calculated using the window displacement, so, every time you scroll, it computes the position where the HTML element should be.

Using JQuery, we can know the window offSet with a small line of code, with this we know how much the user has scrolled:

$(window).scrollTop();

This returns us a value that represents how many pixels we have scrolled on the page.

The HTML structure

I will create a single element moving along the page just so you get the idea how it works.

<html>
<head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
    <img id="parallaxElement" src="image1.png" alt=""/>
</body>
</html>

The image with the id parallaxElement will be the one to be used in the parallax movement.

The CSS style

*{
    margin:0px;
    padding:0px;
}body{
    height:5000px;
}#parallaxElement{
    position:fixed;
    top:0px;
    left:0px;
}

A really small CSS, because all the movement is done by the javascript.

Parallax with Javascript

And for last the parallax made with javascript.

In this example i will be making the element move acording to the window offSet, has i said before. So to do that, we need to know the window offSet and use it to make our calculations.

Here goes:

<script type="text/javascript">
    $(window).scroll(function(){
        $top = $(window).scrollTop();
        while($top > $(window).height() - $("#parallaxElement").height()){
            $top = $top - $(window).height()/1.1;
        }
        $left = $(window).scrollTop();
        while($left > $(window).width() - $("#parallaxElement").width()){
            $left = $left - $(window).width()/1.1;
        }
        $("#parallaxElement").css({"top":$top,"left":$left});
    });
</script>

This is a really simple scrypt, you can have the idea with this and make your own moving scrypt.

What it does is, everytime the window moves, it uses the window offSet and the width and height of the window to reposition the element.

If you have any doubt, just leave a comment bellow or say something in facebook or twitter.

Hope it helped 🙂

Advertisements

One thought on “Parallax Scroll Window Offset

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s