Как вернуть в исходное значение блок при параллакс эффекте?

437
17 июня 2017, 13:31

Когда мышка уходит из области эффекта параллакса, то объекты остаются там же, а мне надо чтобы они возвращались в исходное состояние.

// Yep, that's it! 
$('#scene').parallax();
body { 
  background: #111; 
  margin: 0; 
} 
 
img { 
  display: block; 
  width: 100%; 
} 
 
.scene { 
  max-width: 500px; 
  margin: 0 auto; 
  padding: 0; 
} 
 
.layer:nth-child(1) { 
  opacity: 0.15; 
} 
 
.layer:nth-child(2) { 
  opacity: 0.30; 
} 
 
.layer:nth-child(3) { 
  opacity: 0.45; 
} 
 
.layer:nth-child(4) { 
  opacity: 0.60; 
} 
 
.layer:nth-child(5) { 
  opacity: 0.75; 
} 
 
.layer:nth-child(6) { 
  opacity: 0.90; 
}
<div id="container" class="container"> 
  <ul id="scene" class="scene"> 
    <li class="layer" data-depth="1.00"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer1.png"></li> 
    <li class="layer" data-depth="0.80"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer2.png"></li> 
    <li class="layer" data-depth="0.60"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer3.png"></li> 
    <li class="layer" data-depth="0.40"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer4.png"></li> 
    <li class="layer" data-depth="0.20"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer5.png"></li> 
    <li class="layer" data-depth="0.00"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer6.png"></li> 
  </ul> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="https://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/deploy/jquery.parallax.js"></script> 
 
<!-- http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/ -->

Answer 1

Вот вам обновленный вариант вашего параллакса, я изменил parallax.js файл и добавил опцию контейнера, и теперь если дать такую опцию на javascript то эффект будет работать только при наведении мыши на данный контейнер.

Примечание:

Контейнер можно дать только javascript элемент Пример document.getElementById('simpleelement').

а это ссылка на скачивание обновленную библиотеку.

$(document).ready(function(){ 
    $('#scene').parallax({ 
        mouseport: document.getElementById('container') 
    }); 
});
body { 
  background: #111; 
  margin: 0; 
} 
#container{ 
    width: 100px; 
    height: 100px; 
} 
img { 
  display: block; 
  width: 100px; 
} 
 
.scene { 
  max-width: 500px; 
  margin: 0 auto; 
  padding: 0; 
} 
 
.layer:nth-child(1) { 
  opacity: 0.15; 
} 
 
.layer:nth-child(2) { 
  opacity: 0.30; 
} 
 
.layer:nth-child(3) { 
  opacity: 0.45; 
} 
 
.layer:nth-child(4) { 
  opacity: 0.60; 
} 
 
.layer:nth-child(5) { 
  opacity: 0.75; 
} 
 
.layer:nth-child(6) { 
  opacity: 0.90; 
}
<div id="container" class="container"> 
  <ul id="scene" class="scene"> 
    <li class="layer" data-depth="1.00"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer1.png"></li> 
    <li class="layer" data-depth="0.80"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer2.png"></li> 
    <li class="layer" data-depth="0.60"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer3.png"></li> 
    <li class="layer" data-depth="0.40"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer4.png"></li> 
    <li class="layer" data-depth="0.20"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer5.png"></li> 
    <li class="layer" data-depth="0.00"><img src="http://www.jqueryscript.net/demo/Simple-Lightweight-jQuery-Parallax-Engine-Parallax-js/examples/images/layer6.png"></li> 
  </ul> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="https://file.town/uploads/0vcu7v43r3oy6c61syj37qury.js"></script>

Answer 2

Не уверен подойдет ли такая реализация, но где-то отсюда нужно копать:

let enabled = true; 
let body = document.body; 
let allList = Array.from(document.querySelectorAll('img')) 
 
let parallax = (el, resistance, mouse) => { 
  if(!enabled) { 
    allList.forEach(element => element.classList.remove('away')); 
    return enabled = true; 
     
  } 
  TweenLite.to(el, 0.4, { 
    x: -((mouse.pageX - window.innerWidth / 2) / resistance), 
    y: -((mouse.pageY - window.innerHeight / 2) / resistance), 
    ease: Power0.easeNone 
  });  
}; 
 
body.addEventListener('mouseenter', () => { 
  enabled = false;   
  body.addEventListener('mousemove', e => { 
    parallax('.background', -30, e); 
    parallax('.cloud1', 10, e); 
    parallax('.cloud2', 20, e); 
    parallax('.cloud3', 30, e); 
  }) 
}) 
 
body.addEventListener('mouseleave', () => { 
  enabled = false;     
    allList.forEach(el => {       
       setTimeout(function(){ 
         el.classList.add('away') 
         el.removeAttribute('style'); 
       }, 400)             
    }) 
})
body { 
  padding: 0; 
  margin: 0; 
  overflow: hidden; 
} 
 
.background { 
  position: absolute; 
  top: -10%; 
  left: -10%; 
  width: 120%; 
  height: 120%; 
  z-index: 1; 
  font-family: Courier; 
  transition: 400ms; 
} 
 
.cloud { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: auto; 
  height: auto; 
  z-index: 2; 
  opacity: 0.8; 
} 
 
.header { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: auto; 
  padding: 12px 0; 
  text-align: center; 
  z-index: 100; 
  color: #fff; 
  font-family: Courier; 
} 
.header h1 { 
  font-size: 40px; 
  font-weight: lighter; 
} 
.header a { 
  font-size: 32px; 
  text-decoration: none; 
  padding-bottom: 2px; 
  border-bottom: 1px solid #fff; 
  color: #fff; 
} 
 
img.away { 
  transform: none !important; 
  transition: 300ms 
}
<img src="http://www.jqueryscript.net/demo/Mouse-aware-Parallax-Effect-with-jQuery-and-TweenMax-Mouse-Parallax/images/background.jpg" alt="New York" class="background"> 
<img src="http://www.jqueryscript.net/demo/Mouse-aware-Parallax-Effect-with-jQuery-and-TweenMax-Mouse-Parallax/images/1.png" alt="Clouds" class="cloud cloud1"> 
<img src="http://www.jqueryscript.net/demo/Mouse-aware-Parallax-Effect-with-jQuery-and-TweenMax-Mouse-Parallax/images/2.png" alt="Clouds" class="cloud cloud2"> 
<img src="http://www.jqueryscript.net/demo/Mouse-aware-Parallax-Effect-with-jQuery-and-TweenMax-Mouse-Parallax/images/3.png" alt="Clouds" class="cloud cloud3">

Дело в том, что greensock, пока не дождется окончания своей анимации, "не разрешает" изменять атрибут style, т.е. сразу при событии mouseleave, не отработает removeAttribute('style'), например. Поэтому методом пробы, определил, что убрать атрибут style можно через 400ms, тогда все элементы возвращаются в "исходное положение". Но никак не могу понять как можно более плавно вернуть анимацию элементов, когда мышь снова входит в контейнер. Как бы там не было, возможно мой ответ подтолкнет на реализацию более правильного подхода.

READ ALSO
Не отображаются иконки glyphicons [требует правки]

Не отображаются иконки glyphicons [требует правки]

Не отображаются иконки glyphicons в gridВ чем может быть проблема?

266
Выравнивание выпадающего меню на css

Выравнивание выпадающего меню на css

Создал меню на css, но проблема в том, что выпадающее меню должно быть не прямо под пунктом меню, на которое навели курсор, а должно занимать...

314