Страницы

Поиск по вопросам

суббота, 13 июля 2019 г.

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

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


Комментариев нет:

Отправить комментарий