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.

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

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

Solution 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";

};

Comments

[zero]

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

[Shmiddty]

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