Keep calm and pass the parallax. #webdevelopment

After reading the heading you might have some questions, read on and hopefully you get all the answers, if not you can always ask in the comments below.

What on earth is parallax?

I’m sure the first question that comes to mind for many people will be: what is parallax? Parallax is not a thing, it is an effect or illusion of depth created by a nifty css trick. If you go and research parallax on the internet you will find that most tutorials and examples are done using css. Me on the other hand always end up with JQuery, guess it just makes me happy.

Anyway, if you are interested in finding out how to create a parallax effect using JQuery, read on. To see a live parallax effect in action, click here.

reniersky_rule

Different Parallax Styles

  • Attach elements to the scroll action to move various layers at different speeds.
  • Attach various elements to the mouse and move individually at different speeds.
  • Rotate connected elements and zoom in or out as the scroll bar moves.
  • Drift elements into view at different speed to the background while scrolling.

I am sure there are many more, but in this article we will be looking at moving different levels at different speeds. This way you get a nice semi-flat look. To create depth you can add shadows and images with vanishing points and apply the css perspective property to the text.

The sample below may not work for copy/pasting but it will give you enough to get a parallax effect going on your site.

The components.

Parallax Layers and speed

To start off we will create an html framework that will house a couple of div’s, which we will be moving around. The second part will be some css to place and style the div’s and finally the JQuery scripts that will attach the div’s to the scrollbar and apply the movement.

The HTML


<div id="keep">
<div id="red" class="back"></div>
<div id="yellow" class="mid"></div>
<div id="green" class="front"></div>
</div>

Start the HTML by attaching the jQuery Rotate script, this usually goes in your head section. Then the three div’s inside a container named #keep.

The CSS

#keep {
position:relative;
display:block;
}
#red {
position:absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
display:block;
z-index: -10;
}
.back {
background-color: red;
width:100%;
}
#yellow {
position:relative;
display:block;
z-index: 15;
}
.mid {
background-color: yellow;
width:100%;
}
#green {
position:relative;
display:block;
z-index: 20;
}
.front {
background-color: green;
width:100%;
}

In this sample the red div are positioned in an absolute place to make sure that all 3 layers are layered on top of each other. The yellow layer will be placed over the red in the same position and finally the green layer starts off below the page (other 2 panels). That wraps it up with the CSS.

The Jquery

<script>
$(document).ready(function(){
var windowWidth = $(window).width(2200);
$("#green").css({ "left": windowWidth});
$(window).scroll(function(){
$("#green").css({ "top":  1.10*(0  + $(window).scrollTop())
});
});
$("#yellow").css({ "left": windowWidth});
$(window).scroll(function(){
$("#yellow").css({ "bottom":  -1.45*(0  + $(window).scrollTop())});
});
$("#red").css({ "left": windowWidth});
$(window).scroll(function(){
$("#red").css({ "bottom":  0.35*(0  + $(window).scrollTop())});
});
});
</script>

No that all our elements are in place, the script brings it all alive. The first thing that happens here are to set a variable equal to the width of the screen and then use that to place each window.

Now that our windows are in place, we start by attaching the window to the scroll action. This means that the following call will be made every time the scroll bar is moved.

We left with telling the script what to do, in this case the jQuery dynamically adjust the window position. The .scrollTop() gets the current top position of the scroll bar. We then use that position and multiply with the speed we require. You will notice that the yellow position are multiplied by a negative value, this causes the window to move down as you scroll down.

Easy! Here is that live sample again: http://davidoldtailor.co.za/

Now it’s your turn, give it a go. If you are not a web developer and would like to have your website feature this, contact me right here: click to connect

Renier van den Berg
Working alone, providing digital services to businesses in different sectors, comes with an advantage. I get to see the similarities in businesses operating in different sectors and will gladly help you to implement the right digital strategies and applications to save money and generate more business leads.