Javascript - Простой parallax эффект

Простой parallax эффект Пример простого 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 и более, то есть нашему медиа-запросу, и, если да, то применяем стили к картинке-сердцу и фону.

При этом сердце движется к курсору мыши, а фон — от него. При смене знаков + и — можно добиться другого поведения.

сайт на Bitrix

Территориально я нахожусь в Санкт-Петербурге, но могу и готова работать со всеми, вне зависимости от вашего местоположения. Вы можете написать мне на почту: Контакты, либо связаться через социальные сети. Ознакомиться с портфолио можно здесь и здесь.

Социальные сети

Рандом новостей