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

Maganmagana

A plugin is nothing more than a piece of code, when you say you don't want to rely one one, it doesn't make a lot sense. If the goal is learning, then why not just look at the source of the plugins and follow the tutorials you've found? – Goliard

@WesleyMurch true, but what you mentioned is only two parts of my three pronged attack. i've dissected plugins as well, but a lot of times (like in this situation) they can be like trying to solve a huge rubix cube (bad commenting, spaghetti-code, one-size-fits-all code, etc...) what I'm after is an explanation of the concept so that along with what i've learned from plugin dissecting and plugin based tutorials i can get a more substantial understanding of the effect rather than a pieced together boot-leg understanding. – Maganmagana

Out of interest, why did you change your accepted answer to Schmiddty? As far as I am aware he just took my code and posted it on jsfiddle... – Larsen

@PezCuckow thats strange, i checked your answer then i left the site. his answer shouldn't have been checked i'll check yours again. – Maganmagana

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

Larsen

i don't mind using a library (i've updated my question to reflect this) i just want to get the general idea of how it works without a plug-in – Maganmagana

Answer 2

Here's a crudely simple implementation of parallax scrolling: http://jsfiddle.net/4kG6s/

function AnimateMe(){
    $("#background").css("background-position", "-=2");
    $("#middleground").css("background-position", "-=4");
    $("#foreground").css("background-position", "-=8");    
}

setInterval(AnimateMe, 100);

While this implementation is animating the background-position, the concept remains the same. The foreground moves proportionally faster than the background, and there are layers stacked on top of eachother. Conceptually, that's as simple as it gets.

Egidio

And here's the same setup with the code from @PezCuckow's answer: jsfiddle.net/4kG6s/1 – Egidio

Answer 3

The code from @PezCuckow's answer but without jQuery (i.e. purely in java script): http://jsfiddle.net/Gurmeet/s26zxcnf/1/

HTML:

<div onmousemove="update(event)">
    <div id="background">
    </div>
    <div id="middleground">
    </div>
    <div id="foreground">
    </div>
</div>

JS:

var strength1 = 50;
var strength2 = 100;
var strength3 = 200;

var background = document.getElementById('background');
var middleground = document.getElementById('middleground');
var foreground = document.getElementById('foreground');

function update(e){
var pageX = e.clientX - (window.innerWidth / 2);
var pageY = e.clientY - (window.innerHeight / 2);
background.style.backgroundPosition = (strength1 / window.innerWidth * pageX * -1)+"px "+(strength1  / window.innerHeight * pageY * -1)+"px";
middleground.style.backgroundPosition = (strength2 / window.innerWidth * pageX * -1)+"px "+(strength2  / window.innerHeight * pageY * -1)+"px";
foreground.style.backgroundPosition = (strength3 / window.innerWidth * pageX * -1)+"px "+(strength3  / window.innerHeight * pageY * -1)+"px";

};

Pronounce