Пример:
HTML:
|
1 2 3 |
<div class="mouse-parallax"> <div class="mouse-parallax-bg"></div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.mouse-parallax { height: 500px; position: relative; overflow: hidden; } .mouse-parallax-bg { position: absolute; background-image: url("photo.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; width: 110%; height: 110%; transition: all 0.1s ease; } |
JS:
|
1 2 3 4 5 6 |
let bg = document.querySelector('.mouse-parallax-bg'); window.addEventListener('mousemove', function(e) { let x = e.clientX / window.innerWidth; let y = e.clientY / window.innerHeight; bg.style.transform = 'translate(-' + x * 50 + 'px, -' + y * 50 + 'px)'; }); |
Если на странице присутствует несколько секций с таким параллаксом, то JS будет таким:
|
1 2 3 4 5 6 7 8 |
let bg = document.querySelectorAll('.mouse-parallax-bg'); for (let i = 0; i < bg.length; i++){ window.addEventListener('mousemove', function(e) { let x = e.clientX / window.innerWidth; let y = e.clientY / window.innerHeight; bg[i].style.transform = 'translate(-' + x * 50 + 'px, -' + y * 50 + 'px)'; }); } |
И для каждой нужно будет задать отдельный класс или стиль с фоновой картинкой.
По аналогии с этим примером, можно двигать несколько наложенных друг на друга фонов (при условии частичной их прозрачности), задавая им разное смещение, например:
|
1 2 3 4 5 |
<div class="mouse-parallax"> <div class="mouse-parallax-bg"></div> <div class="mouse-parallax-fog-1"></div> <div class="mouse-parallax-fog-2"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.mouse-parallax { height: 500px; position: relative; overflow: hidden; } .mouse-parallax-bg, .mouse-parallax-fog-1, .mouse-parallax-fog-2 { position: absolute; background-position: center center; background-repeat: no-repeat; background-size: cover; width: 110%; height: 110%; transition: all 0.1s ease; background-image: url("photo.jpg"); } .mouse-parallax-fog-1 { background-image: url("fog-1.png"); left: -10%; } .mouse-parallax-fog-2 { background-image: url("fog-2.png"); } |
|
1 2 3 4 5 6 7 8 9 10 |
let bg = document.querySelector('.mouse-parallax-bg'); let fog1 = document.querySelector('.mouse-parallax-fog-1'); let fog2 = document.querySelector('.mouse-parallax-fog-2'); window.addEventListener('mousemove', function(e) { let x = e.clientX / window.innerWidth; let y = e.clientY / window.innerHeight; bg.style.transform = 'translate(-' + x * 50 + 'px, -' + y * 50 + 'px)'; fog1.style.transform = 'translate(+' + x * 50 + 'px, -' + y * 50 + 'px)'; fog2.style.transform = 'translate(-' + x * 20 + 'px, -' + y * 20 + 'px)'; }); |
а как сделать такой эффект в пределах блока, а не когда ты водишь по всему бади и картинка двигается
window.addEventListener('mousemove', function(e) {заменить на
bg.addEventListener('mousemove', function(e) {или, если используется вариант для нескольких секций
bg[i].addEventListener('mousemove', function(e) {Эх этот код бы на React'е еще )))
Евгений: Если вы не можете написать данный код на react, значит вы не знаете react, возможно слабые знание и в js, очень слабые ибо переписать этот код на react от силы пару минут.
Ловите ref и вешаете событие, по сути все, остальное проблема верстки.
Автору спасибо, простой и классный код, прям от души.
Огромное спасибо! Очень интересное решение, да ещё и с таким крохотным кодом. :)))
Спасибо огромное.
Встроил данное решение в вордпресс. Работает!
Появился вопрос: а возможно ли на адаптиве заменить данный параллакс картинкой?
Использую эффект в шапке страницы. На адаптиве выглядит ... никак не выглядит :о) Подумал, вдруг есть простое решение заменить данный скрипт просто изображением?
Заранее спасибо.
Поставить проверку на ширину экрана, и если она больше нужной, запускать этот скрипт, например:
if (screen.width > 768) { // тут код }Или мобильник определять, например:
isMobile = navigator.userAgent.match(/(iPhone|iPod|Android|BlackBerry|iPad|IEMobile|Opera Mini)/); if (!isMobile) { // тут код }Спасибо огромное.
Отличный параллакс. Спасибо. А подскажите, как сделать чтобы данный скрипт применялся только к одной секции?? В моем случае section id="stages"
Оно и должно применяться к одной секции так то.
Задайте для ее фона (mouse-parallax-bg) класс, который потом используется в скрипте, и стили все переписать под это.
Всё отлично, всё работает, только не знаю как подключить несколько изображений к этому эффекту... Может подскажете?)
Добавил пару вариантов для разных секций и для нескольких фонов.
Как избежать странных подергиваний в Internet Explorer?
Если честно, не знаю и проверить не могу...
А IE разве еще пользуются?
Я наверное, лет 10 назад уже забыл как он выглядит 🙂
Шикарно. Все сразу же заработало)) Огромное спасибо автору.
До этого имел в арсенале кусок на jQ в раза 3-4 больше! этот отработал на ура, спасибо!
Просто и гениально, спасибо! 🙂