Parallaxe horizontale de Défilement à partir de Zéro - Pas de Plugin (jQuery)

Personne ne sait si je peux trouver un tutoriel pour savoir comment faire parallaxe horizontale de défilement via js forme de zéro (pas de plug-in)? Ou peut me fournir un exemple

J'ai passé des tonnes de temps de Googler, mais ne pouvait trouver des tutoriels à l'aide de plugins

La raison pour laquelle je veux le faire à partir de zéro est parce que je veux une parfaite compréhension de la façon dont la parallaxe fonctionne vraiment.

Je n'ai pas l'esprit à l'aide de la bibliothèque jQuery je ne veux pas compter sur un plugin pour l'effet.

Un plugin n'est rien de plus qu'un morceau de code, quand vous dites que vous ne voulez pas à s'appuyer l'un l'un, il ne fait pas beaucoup de sens. Si le but est d'apprendre, alors pourquoi pas il suffit de regarder la source des plugins et de suivre les tutoriels que vous avez trouvé?
vrai, mais ce que vous avez mentionné est que les deux parties de mes trois volets d'attaque. j'ai disséqué des plugins, mais un grand nombre de fois (comme dans cette situation), ils peuvent être comme essayer de résoudre une grande rubix cube (mauvais commentaires, code spaghetti, one-size-fits-all code, etc...) ce que je suis après, est une explication de la notion, de sorte que le long avec ce que j'ai appris de plugin à la dissection et plugin en fonction des tutoriels que je peux obtenir un plus considérable à la compréhension de l'effet, plutôt que d'un rassemblés boot-jambe de la compréhension.
D'intérêt, pourquoi avez-vous changé accepté de répondre à Schmiddty? Pour autant que je suis conscient qu'il a juste eu mon code et l'a affiché sur jsfiddle...
c'est étrange, j'ai vérifié votre réponse, puis j'ai quitté le site. sa réponse ne devrait pas avoir été vérifié, je vais vérifier le vôtre.

OriginalL'auteur zero | 2012-09-05

  1. 4

    Un tutoriel simple

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

    Vous pouvez appliquer ce code à 5/6 éléments (avec différents scaling) et de créer un grand, simple parralax effet sur la base des utilisateurs de la souris.

    Voici un exemple, grâce à Shmiddty: http://jsfiddle.net/4kG6s/1

    "Et voici la même configuration avec le code de @PezCuckow la réponse de"

    Par mise à l'échelle, je veux dire quelque chose comme ceci (édité à partir de ci-dessus)

    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");
});

    Sans une librairie comme jQuery l'effet de parallaxe serait plutôt difficile à mettre en œuvre, vous devez manuellement en œuvre de l'animation plutôt que d'utiliser les fonctionnalités fournies dans la bibliothèque.

    Cela étant dit, cependant, est un guide approximatif est quelque chose comme ci-dessous implémente un très mauvais effet de parallaxe où les décors sont en mouvement à des vitesses différentes.

    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';
}
    je n'ai pas l'esprit à l'aide d'une bibliothèque (j'ai mis à jour ma question afin de refléter cette) je veux juste pour se faire une idée générale de la façon dont il fonctionne sans plug-in
    Voir egstudio.biz/easy-parallax-avec-jquery

    OriginalL'auteur Pez Cuckow

  2. 3

    Voici une crue simple de mise en œuvre de la parallaxe défilement: http://jsfiddle.net/4kG6s/

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

setInterval(AnimateMe, 100);

    Bien que cette mise en œuvre est d'animer le background-position, le concept reste le même. Au premier plan se déplace proportionnellement plus vite que l'arrière-plan, et il y a des couches empilées sur le dessus de l'autre. Sur le plan conceptuel, c'est aussi simple que cela.

    Et voici la même configuration avec le code de @PezCuckow de réponse: jsfiddle.net/4kG6s/1

    OriginalL'auteur Shmiddty

  3. 2

    Le code de @PezCuckow de répondre, mais sans jQuery (c'est à dire purement en 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";

    };

    OriginalL'auteur Gurmeet Singh