Horizontal Parallax Scrolling from Scratch - No Plugin (jQuery)

Question

Does anyone know were I can find a tutorial for how to do horizontal parallax scrolling via js form scratch (i.e. no plug-in)? Or can provide me with an example

I\'ve sp

Answer 1

A simple tutorial

See: http://www.egstudio.biz/easy-parallax-with-jquery/

You can apply that code to 5/6 elements (with different scaling) and create a great, simple parralax effect based on the users mouse.

Here is an example, thanks to Shmiddty: http://jsfiddle.net/4kG6s/1

"And here's the same setup with the code from @PezCuckow's answer"

By scaling I mean something like this (edited from above)

var strength1 = 5;
var strength2 = 10;
var strength3 = 15;
$("html").mousemove(function(e){
    var pageX = e.pageX - ($(window).width() / 2);
    var pageY = e.pageY - ($(window).height() / 2);
    var newvalueX = ;
    var newvalueY = height * pageY * -1;
    $('item1').css("background-position", (strength1 / $(window).width() * pageX * -1)+"px "+(strength1  / $(window).height() * pageY * -1)+"px");
    $('item2').css("background-position", (strength2 / $(window).width() * pageX * -1)+"px "+(strength2  / $(window).height() * pageY * -1)+"px");
    $('item3').css("background-position", (strength3 / $(window).width() * pageX * -1)+"px "+(strength3  / $(window).height() * pageY * -1)+"px");
});

---

Without a library such as jQuery the parallax effect would be rather difficult to implement, you'd need to manually implement all the animation rather than using the features provided in the library.

That being said however an approximate guide is something like the below implements a very poor parallax effect where the backgrounds are moving at different speeds.

CSS:

#bg1, #bg2, #bg3 {
    background-image:url('stars.gif');
    height: 100%;
    width: 100%;
    position: absolute;
    left: 100%;
}

HTML:

JS:

while(true) {
  document.getElementById('bg1').style.left = (document.getElementById('bg1').style.left) - 4 + 'px';
  document.getElementById('bg2').style.left = (document.getElementById('bg2').style.left) - 10 + 'px';
  document.getElementById('bg3').style.left = (document.getElementById('bg3').style.left) - 20 + 'px';
}