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 spent tons of time Googling it, but could only find tutorials using plug-ins

The reason I want to do it from scratch is because I want a perfect understanding of how parallax truly works.

I don’t mind using the jQuery library I just don’t want to rely on a plugin for the effect.

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:

<div id="bg1"></div>
<div id="bg2"></div>
<div id="bg3"></div>

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';
}