Параллакс эффект при движении мыши

Данный скрипт не требует никакие библиотеки и занимает всего 6 строчек.

Пример:

HTML:

<div class="mouse-parallax">
	<div class="mouse-parallax-bg"></div>
</div>

</div>

CSS:

.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;  
}

.mouse-parallax {

height: 500px;

position: relative;

overflow: hidden;

}

.mouse-parallax-bg {

position: absolute;

background-position: center center;

background-repeat: no-repeat;

background-size: cover;

width: 110%;

height: 110%;

transition: all 0.1s ease;

}

JS:

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)';
});

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 будет таким:

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)';
	});	
}

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)';

});

}

И для каждой нужно будет задать отдельный класс или стиль с фоновой картинкой.

По аналогии с этим примером, можно двигать несколько наложенных друг на друга фонов (при условии частичной их прозрачности), задавая им разное смещение, например:

<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>

</div>

.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");	
}

.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;

}

.mouse-parallax-fog-1 {

left: -10%;

}

.mouse-parallax-fog-2 {

}

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)';
});

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)';

});

Опубликовано: 29.11.2019 / Обновлено: 06.05.2021
Рубрики: Фоны и паттерны - простые решения
Метки: JavaScript
30504 просмотра

Смотрите также:

Анимация графического фона на CSS

Простой пример движения графического фона блока средствами CSS

Белый шум на JS

Небольшой JavaScript, создающий белый шум в канвасе

Бегущие волнистые линии

Анимированные волнистые линии с использованием SVG и CSS

Добавить комментарий:

Ваш комментарий отправлен!

Alex13: 09.09.2023 в 02:51

Простое и понятное решение, но, есть недостаток:
Если использовать в двигаемом блоке transition: all 0.1s ease, то в браузерах на движке хромиум при открытых инструментах разработчика анимация тормозит, в Firefox тормозит и без devtools.
А если убрать эту строку, то нет плавности при переходе курсора в рабочую область, например с панели закладок.
Есть у кого-то идеи как это победить?

Ответить
- Alex13: 09.09.2023 в 03:42
  Нашел решение проблемы, вдруг кому-то пригодится. Я предположил, что 'mousemove' срабатывает слишком часто для корректной работы со свойством transition, поэтому нужно его искусственно ограничить, немного усложняем JS:
  
  const bg = document.querySelector('.mouse-parallax-bg'); let stopEvent = false; window.addEventListener('mousemove', function(e) { if (!wait) { const x = e.clientX / window.innerWidth; const y = e.clientY / window.innerHeight; bg.style.transform = 'translate(-' + x * 50 + 'px, -' + y * 50 + 'px)'; stopEvent = true; setTimeout(function () { wait = false; }, 33); } });
  
  Теперь все работает плавно во всех браузерах. Более того, увеличив значение transition например до 0.5s, а задержку до 100 - 200 мы получаем некоторую "инерционность" движения.
  Ответить
  - Alex13: 09.09.2023 в 03:46
    
    if (!stopEvent) {
    
    Забыл тут переменную исправить.
    
    Ответить
Sergey: 31.05.2023 в 10:45

Гениально! Попробовал разные решения, ваше - лучшее!
Скажите, а можно как-то доработать код, что бы ещё и на мобильниках/планшетах работало, где вместо мыши по сенсору пальцем водишь и оно так же двигается?)
Заранее спасибо!

Ответить
- Alexander: 05.06.2023 в 12:10
  
  Примерное решение тут: Смена слайдов мышкой или пальцем, а именно принцип нажатия и движения по сенсору
  Но по моему это лишнее, т.к. задача тут немного другая.
  
  Ответить
Олег: 26.03.2022 в 21:08

а как сделать такой эффект в пределах блока, а не когда ты водишь по всему бади и картинка двигается

Ответить
- Alexander: 26.03.2022 в 22:48
  window.addEventListener('mousemove', function(e) {
  
  заменить на
  
  bg.addEventListener('mousemove', function(e) {
  
  или, если используется вариант для нескольких секций
  
  bg[i].addEventListener('mousemove', function(e) {
  Ответить
Евгений: 26.10.2021 в 16:12

Эх этот код бы на React'е еще )))

Ответить
- Серега: 16.01.2022 в 23:21
  
  Евгений: Если вы не можете написать данный код на react, значит вы не знаете react, возможно слабые знание и в js, очень слабые ибо переписать этот код на react от силы пару минут.
  
  Ловите ref и вешаете событие, по сути все, остальное проблема верстки.
  
  Автору спасибо, простой и классный код, прям от души.
  
  Ответить
Миша: 11.09.2021 в 23:53

Огромное спасибо! Очень интересное решение, да ещё и с таким крохотным кодом. :)))

Ответить
Иван: 01.07.2021 в 17:37

Спасибо огромное.
Встроил данное решение в вордпресс. Работает!
Появился вопрос: а возможно ли на адаптиве заменить данный параллакс картинкой?
Использую эффект в шапке страницы. На адаптиве выглядит ... никак не выглядит :о) Подумал, вдруг есть простое решение заменить данный скрипт просто изображением?
Заранее спасибо.

Ответить
- Alexander: 01.07.2021 в 19:12
  Поставить проверку на ширину экрана, и если она больше нужной, запускать этот скрипт, например:
  
  if (screen.width > 768) { // тут код }
  
  Или мобильник определять, например:
  
  isMobile = navigator.userAgent.match(/(iPhone|iPod|Android|BlackBerry|iPad|IEMobile|Opera Mini)/); if (!isMobile) { // тут код }
  Ответить
  - Иван: 02.07.2021 в 21:09
    
    Спасибо огромное.
    
    Ответить
Андрей: 21.05.2021 в 12:27

Отличный параллакс. Спасибо. А подскажите, как сделать чтобы данный скрипт применялся только к одной секции?? В моем случае section id="stages"

Ответить
- Alexander: 21.05.2021 в 15:45
  
  Оно и должно применяться к одной секции так то.
  Задайте для ее фона (mouse-parallax-bg) класс, который потом используется в скрипте, и стили все переписать под это.
  
  Ответить
Елена: 04.05.2021 в 19:02

Всё отлично, всё работает, только не знаю как подключить несколько изображений к этому эффекту... Может подскажете?)

Ответить
- Alexander: 06.05.2021 в 08:08
  
  Добавил пару вариантов для разных секций и для нескольких фонов.
  
  Ответить
Катя: 23.02.2021 в 00:46

Как избежать странных подергиваний в Internet Explorer?

Ответить
- Alexander: 23.02.2021 в 11:03
  
  Если честно, не знаю и проверить не могу...
  А IE разве еще пользуются?
  Я наверное, лет 10 назад уже забыл как он выглядит 🙂
  
  Ответить
Евгений: 19.07.2020 в 16:03

Шикарно. Все сразу же заработало)) Огромное спасибо автору.

Ответить
Вадим: 06.07.2020 в 04:16

До этого имел в арсенале кусок на jQ в раза 3-4 больше! этот отработал на ура, спасибо!

Ответить
Евгений: 16.06.2020 в 12:43

Просто и гениально, спасибо! 🙂

Ответить

Пример:

HTML:

CSS:

JS:

Смотрите также:

Анимация графического фона на CSS

Белый шум на JS

Бегущие волнистые линии

Добавить комментарий:

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