Когда мышка уходит из области эффекта параллакса, то объекты остаются там же, а мне надо чтобы они возвращались в исходное состояние.
// 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/ -->
Вот вам обновленный вариант вашего параллакса, я изменил 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>
Не уверен подойдет ли такая реализация, но где-то отсюда нужно копать:
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, тогда все элементы возвращаются в "исходное положение". Но никак не могу понять как можно более плавно вернуть анимацию элементов, когда мышь снова входит в контейнер. Как бы там не было, возможно мой ответ подтолкнет на реализацию более правильного подхода.
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Не отображаются иконки glyphicons в gridВ чем может быть проблема?
Создал меню на css, но проблема в том, что выпадающее меню должно быть не прямо под пунктом меню, на которое навели курсор, а должно занимать...