Когда мышка уходит из области эффекта параллакса, то объекты остаются там же, а мне надо чтобы они возвращались в исходное состояние.
// 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;
}
Ответ
Вот вам обновленный вариант вашего параллакса, я изменил 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;
}
Комментариев нет:
Отправить комментарий