» »

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

Параллакс эффект при движении мыши
В этом материале узнаете о примере несложного параллакса, который автоматически реагирует на движение курсора на изображение при помощи CSS и JS. Речь идет про эффект, который вы безусловно не один раз встречали на сайтах, где наводя на картинку она начинает двигаться в противоположную сторону по курсору. Что делает этот трюк оригинальным для пользователя, ведь сама основа картинки остается в блоке.

Отличным решением может стать на большом формате картинки, так как на большом размере он больше виден, что можно поставить под любой формат на сайте. Это может быть как галерея изображений, где при открытии можно подключить parallax с движением мыши. Здесь не нужно подключать библиотеки, что создано на js, где идет корректно в малом виде для фиксированной корректировки скорости движения для элементов.

Parallax-эффект изображений при движение курсора

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

Установочный процесс:

HTML

Код
<div class="parallaks-dvizheniye">
  <div class="kanuvoye-pomesucud"></div>
</div>

CSS

Код
.parallaks-dvizheniye {
  height: 485px;
  position: relative;
  overflow: hidden;
}
.kanuvoye-pomesucud {
  position: absolute;
  background-image: url("http://zornet.ru/_fr/56/1052296.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 75%;
  height: 48%;
  transition: all 0.1s ease;  
}

JS

Код
let bg = document.querySelector('.kanuvoye-pomesucud');
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)';
});

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

Демонстрация
Источник: atuin.ru
2019-12-10 Загрузок: 1 Просмотров: 315 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 0
avatar