Easy Parallax with jQuery

April 17th | By | Back to Blog

When we created our coming soon page, we’ve 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:


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:


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 I’ve 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.

In this case 1 movement point on a 1920×1080 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.

$("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:

$("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).

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).

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.

$('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 you’ve enjoyed this quick tutorial. If you did, please comment, tweet or share this tutorial with your friends!


  • marko

    Hi! Good tutorial but only a question. If I want to move a div what I have to modify?
    I think this part of code ?
    $(‘body’).css(“background-position”, newvalueX+”px “+newvalueY+”px”);

    body changes to “#div” but “backgroun-position” ?

    Thank you so much!

  • egstudio

    Hi Marko,

    You need to change a couple of things but it also depends on how your code is built.

    If you want to move a div you will have to position it as an absolute position on the screen and then you can play with the “Top” & “Left” values (top = newvalueY & left = newvalueX) to create this effect.

  • http://www.danieldoktor.dk Daniel

    Hello,

    My iPhone doesn’t “recognize” the parallax effect, have considered using the plax plugin, so it’s usable on iDevices also?

    check: http://zachholman.com/posts/parallaxing-parallax-on-ios/

    - Daniel

  • jits

    thanks

  • Amit Gupta

    Thanks for this tutorial.

  • Atul

    Vielen Dank für dieses Tutorial

  • Paopee

    Thanks!

  • http://www.cianografia.com/ Cianografia

    I was looking for this tutorial … thanks for sharing :)

  • mAlik

    good!

  • Yashesh Vaghela

    a really great tutorial
    this is what i made using skrollr and svg only.
    http://milanart.in/philosophy/

    keep skrolling :)

  • Roy

    I cannot see the demon web page, http://www.egstudio.co.il/

  • Naldo Rck

    Nice Bee

  • Dark Pureblood

    nice one…