Super Simple Parallax Effect

The Parallax effect, which most of us have seen on many websites, can be achieved in many ways. However, I like the the simple ones… This example, which you will see below has not been created by me but from these guys here. I just want to put it here as a source which I can always refer to when I need it quickly. As well as, here is done with jQuery rather than pure JS.

The Parallax

function onLoad() {
	window.onscroll = function() {
	    var speed = 5.0;
	    $(".parallax").css("background-position-y", (window.pageYOffset / speed) + "px");
	}
}

onLoad();

Make sure you put the code above within

$(document).ready(function(){
	
});

In our example, we animate the “background-position” property on the “Y” axis, which means the animation will be vertical. However, we also can animate the “top”, “margin-top”, “padding-top” etc. The only thing is if we animate everything else except “background-position” we need to have a container that contains the element we want to animate and the animated element should have a “position: relative” or “position:absolute” in the css file.

`