Javascript Maus Bewegung Parallax Div

Ich habe ein Problem mit diesem Javascript. Auf meiner Website ist ein Parallax Div und es sollte scrollen wenn ich meine Maus bewege. Dieses Skript funktioniert so weit, aber es scrollt auf dem Körper und nicht auf dem Parallax Div, wie es sollte.Javascript Maus Bewegung Parallax Div

var x, y; 
function handleMouse(e) { 
    if (x && y) { 
    window.scrollBy(e.clientX - x, e.clientY - y); 
    } 
    x = e.clientX; 
    y = e.clientY; 
} 
document.onmousemove = handleMouse;

HTML

 <div class="parallax"> 
      <div class="parallax__layer parallax__layer--deep"> 
       <img id="background" src="img/deep.png"> 
      </div> 
      <div class="parallax__layer parallax__layer--back"> 
       <img id="blatt" src="img/back.png"> 
      </div> 
      <div class="parallax__layer parallax__layer--base"> 
       <img id="farn" src="img/base.png"> 
      </div> 
      <div class="parallax__layer parallax__layer--ground"> 
       <div id="faul"> 
        <img id="sloth" src="img/y3oVSt2.png"> 
       </div> 
      </div> 
     </div>

CSS

.parallax { 
    perspective: 1px; 
    height: 150vh; 
    overflow-x: scroll; 
    overflow-y: scroll; 
    margin-left: -730px; 
    margin-top: -300px; 
} 
.parallax__layer img { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

.parallax__layer--ground { 
    transform: translateZ(0px); 
} 
.parallax__layer--base { 
    transform: translateZ(0px); 
} 
.parallax__layer--back { 
    transform: translateZ(-5px) scale(2); 
} 
.parallax__layer--deep { 
    transform: translateZ(-10px) scale(5); 
}

Quelle

2016-04-15 Philipp

verfassen JSFiddle oder Stackoverflow des javascriot Dolmetscher –

Eine Geige wäre nützlich verwenden, aber es ist, weil Ihr '.scrollBy Aufruf()' auf 'window'? Dies wird dazu führen, dass das Fenster statt des '.parallax'-Divs blättert. – digglemister

Ich habe eine Geige erstellt: https://jsfiddle.net/vfs2rhqL/ Wenn Sie die Maus bewegen, sollte es den Effekt haben, den Sie erreichen, wenn Sie mit dem Mausrad blättern. Vielen Dank. – Philipp

Es ist, weil Sie .scrollBy() auf window anrufen.

var speed = 5 //adjust to change parallax scroll speed 
var x, y; 
function handleMouse(e) { 
    if (x && y) { 
    document.getElementsByClassName("parallax")[0].scrollTop += speed*(e.clientY - y); 
    document.getElementsByClassName("parallax")[0].scrollLeft += speed*(e.clientX - x); 
    } 
    x = e.clientX; 
    y = e.clientY; 
} 
document.onmousemove = handleMouse;

Sie auch wollen x zurücksetzen könnte und y, wenn Sie mit der Maus das Fenster verlässt, sonst könnte man Sprünge bekommen, wenn zum Beispiel das: Sie stattdessen die .scrollTop und .scrollLeft Eigenschaften des .parallax div anpassen möchten Maus verlässt links ab und dann von rechts wieder eintritt:

document.onmouseleave = function() { 
    x = undefined; 
    y = undefined; 
}

überprüfen Sie die Arbeits Geige aus: https://jsfiddle.net/uw2n0jox/3/

Quelle

2016-04-15 09:43:09 digglemister

Danke, es hat funktioniert! – Philipp

Sprechen Sie die Parallaxe div fixiert. So ... Da muss man es auf dem Parallax Div rollen lassen.

<div class="bg" style="background:url('image/banner.png') repeat;position:fixed;width: 100%;height:300%;top:0;left:0;z-index:-1;"> </div>

Quelle

2016-04-15 11:33:58 astrosixer

Javascript Maus Bewegung Parallax Div

Antwort

Verwandte Themen