Пример простого parallax эффекта.
Верстка:
<div id="heartcontainer">
<img src="hhh.png" alt>
<div>
Здесь какой-то текст
</div>
</div>
Стили:
* {
box-sizing: border-box;
}
body {
margin: 0;
color: #fff;
}
#heartcontainer {
width: 100%;
background-image: url(fon.jpg);
position: relative;
background-size: contain;
overflow: hidden;
height: 500px;
}
#heartcontainer div {
position: absolute;
width: 60%;
left: 40px;
top: 40px;
padding: 20px;
font-family: serif;
font-size: 20px;
background: rgba(0,0,0,0.2);
}
#heartcontainer img {
position: absolute;
bottom: -35px;
right: 50px;
width: 40%;
filter: drop-shadow(-200px 200px 50px #000);
padding: 1rem;
z-index: 2;
}
Скрипт:
<script>
"use strict"; const heart = heartcontainer.querySelector("img"), fluidheart = window.matchMedia("(min-width: 726px)"); heartcontainer.addEventListener("mousemove", function(e) { if (fluidheart.matches) { heart.style.transform = `translate(${e.clientX/14}px,${e.clientY/14}px)`; heartcontainer.style.backgroundPosition = `calc(50% - ${e.clientX/50}px) calc(50% - ${e.clientY/50}px)`; } }) </script>
Скрипт пишем по стандарту ES5 и указываем, что данный код будет работать по этому стандарту с помощью директивы: 'use strict'. Но следует учитывать, что она не поддерживается IE9 и старше.
Во fluidheart будет возвращен объект MediaQueryList, содержащий результат обработки переданной media query строки, в данном случае это min-width: 726px, то есть список медиа запросов, которые можно в дальнейшем применять для формирования различного поведения при разной ширине экрана.
Затем вешаем слушателя события addEventListener при mousemove на объекте heartcontainer.
В условии с помощью fluidheart.matches проверяем соответствует ли ширина экрана 726px и более, то есть нашему медиа-запросу, и, если да, то применяем стили к картинке-сердцу и фону.
При этом сердце движется к курсору мыши, а фон — от него. При смене знаков + и — можно добиться другого поведения.