Как реализован такой эффект?

Question

[vladimir_html]

https://tympanus.net/Development/PhotographyWebsit...
Здесь, если поводить мышкой, то можно заметить, что фотограф поворачивается и размывается.
Есть предположение, что тут две фотографии, просто одна статичная и несколько прозрачная, а вторая динамичная и непрозрачная. В общем, как?

Answer 1

[kulaeff]

Заходим по ссылке, открываем инспектор по F12 и видим, что есть 2 слоя hero__back, у которых есть background-image. При этом, как вы верно заметили, один слой статичен, а к другому применяется transform: translate3d() rotate3d() в зависимости от позиции курсора мыши.

Answer 2

[Lenar Shaidullin]

Можно сделать через parallax, через layers делаете 2-3 изображения и накладываете их друг на друга, далее уже смотрите и настраиваете движение под себя. Вот тут в документации все расписано: matthew.wagerfield.com/parallax привлеките дизайнера.