Easy Parallax with jQuery

About

Services

Work

Blog

Contact

Easy Parallax with jQuery

April 17th | By Liad Guez | Back to Blog

When we created our coming soon page, weve decided to tweak it up a bit by making a cool parallax effect between the
content and the background of the website. In this tutorial we will demonstrate how to create a basic instance of the parallax
effect using jQuery.

What is a Parallax Effect?

Wikipedia describes the parallax effect as an apparent displacement or difference in the apparent position of an object viewed
along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines. But I
refer to it as The cool effect that you can control by moving the mouse!.

The Code & Logic

Here is the full code:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15

var movementStrength = 15;

var height = movementStrength / $(window).height();

var width = movementStrength / $(window).width();

$("html").mousemove(function(e){

var pageX = e.pageX - ($(window).width() / 2);

var pageY = e.pageY - ($(window).height() / 2);

var newvalueX = width * pageX * -1;

var newvalueY = height * pageY * -1;

$('body').css("background-position", newvalueX+"px "+newvalueY+"px");

});

Now, I will explain each part:

1
2
3
4

var movementStrength = 15;

var height = movementStrength / $(window).height();

var width = movementStrength / $(window).width();

Here I create a variable called movementStrength. This variable determines the maximum amount of movement which I
allow the designated object to move in pixels. So in this case Ive decided to limit this object (in this case the html body tag) to
15 pixels on each side (left / right / up / down).
The parallax moves in relation to a relative space, in this case the window or the screen size. So by dividing the
movementStrength value with each of the correlating height and width values I can determine how many pixels is 1 movement
point.

http://www.egstudio.biz/easy-parallax-with-jquery/[02/11/2013 12:09:34 p.m.]

Easy Parallax with jQuery

In this case 1 movement point on a 19201080 resolution (on the X axis) is 0.0078125 pixels, so if you move 0.0078125 pixels
1920 times you will get a total of 15 pixels the threshold we set.
1
2
3

$("html").mousemove(function(e){
...
});

Since I want my effect to move with the mouse I will call the function that will cause the actual effect using the jQuery
mousemove event. Now lets look on how the actual function works:
01
02
03
04
05
06
07
08
09
10

$("html").mousemove(function(e){

var pageX = e.pageX - ($(window).width() / 2);

var pageY = e.pageY - ($(window).height() / 2);

var newvalueX = width * pageX * -1;

var newvalueY = height * pageY * -1;

$('body').css("background-position", newvalueX+"px "+newvalueY+"px");

});

Now I want to know where the mouse is, in relation to a point of focus (which in this case is the center of the screen).
1

var pageX = e.pageX - ($(window).width() / 2);

Here I define a variable called pageX and I fill it with the current distance of the mouse from the focus point (the window
width / 2 i.e the center of the screen).
1

var newvalueX = width * pageX * -1;

Afterwards I the this relative value multiply it with the width movement point value (if you remember
movementStrength/ScreenWidth = 1 horizontal movement point) and I multiply it with -1 so that I can create a mirror
movement of the mouse instead of a following movement.
1

$('body').css("background-position", newvalueX+"px "+newvalueY+"px");

In the end I use the new position values to change the background position of the designated DOM element.
In this case I chose to move only the background, but I can move an entire element just as well.
This is a basic implementation of the parallax effect. To make it more interesting try implementing the effect on more then 1
element changing the movementStrength to from the closest visually to the farthest (closest gets the bigger value) and you can
make a nice 3D effect.
I hope youve enjoyed this quick tutorial. If you did, please comment, tweet or share this tutorial with your friends!

Recent Posts
Manually creating parameter hash in rails
Complex queries in Wordpress with WP_Query
How to insert the Euro sign in Javascript

http://www.egstudio.biz/easy-parallax-with-jquery/[02/11/2013 12:09:34 p.m.]

Easy Parallax with jQuery

Contact
15 Yeda Am St.
Ramat Gan 52526 Israel
Tel. +972 (0)3 952 53 62

http://www.egstudio.biz/easy-parallax-with-jquery/[02/11/2013 12:09:34 p.m.]