Параллакс эффект при движении мыши
 | |
| В этом материале узнаете о примере несложного параллакса, который автоматически реагирует на движение курсора на изображение при помощи 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 | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |