Javascript движение мыши parallax div

У меня проблема с этим javascript. На моем веб-сайте есть div parallax, и он должен прокручиваться, если я перемещаю мышь. Этот скрипт работает до сих пор, но он прокручивается по телу, а не по параллаксу div, как и следовало ожидать.Javascript движение мыши 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); 
}

источник

2016-04-15 Philipp

Дать JSFiddle или использовать javascriot интерпретатор StackOverflow в –

скрипку было бы полезно, но это потому, что ваш вызова '.scrollBy()' 'на window'? Это приведет к тому, что окно будет прокручиваться, а не '.parallax'. – digglemister

Я создал скрипку: https://jsfiddle.net/vfs2rhqL/ Когда вы двигаете мышь, она должна иметь эффект, который вы достигаете, когда вы прокручиваете колесико мыши. Благодарю. – Philipp

Это потому, что вы звоните .scrollBy() на window. Вместо этого, вы хотите настроить .scrollTop и .scrollLeft свойства .parallax DIV:

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;

Вы также можете сбросить й и у, когда мышь покидает окно, в противном случае вы можете получить прыжки, если, например, мышь покидает слева, а затем вновь поступает с правой стороны:

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

Заканчивать рабочую скрипку: https://jsfiddle.net/uw2n0jox/3/

источник

2016-04-15 09:43:09 digglemister

Спасибо, это сработало! – Philipp

Сделать параллакс ДИВ фиксирован. Нравится это .... Так как вам нужно прокрутить его на параллаксе div.

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

источник

2016-04-15 11:33:58 astrosixer

Javascript движение мыши parallax div

ответ

Смежные вопросы