Изображения для сайта с эффектом параллакса

Давно мы не писали об эффекте параллакса для сайта, в сегодняшнем уроке мы хотим вернуться к этому замечательному приему, ведь в повседневной реализации его становится все больше. Недавно наткнулся на весьма интересный комикс, а именно Photonopia, он реализован на ios и в нем все станицы и изображения анимированны с помощью нашего любимого эффекта. Естественно мы захотели рассказать, как можно реализовать такой прием для обычного изображения и применить его у себя на ресурсе не затратив при этом особых усилий.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

Мы хотим показать как можно оживить изображение заставив его реагировать при наведении курсора мыши весьма необычным способом, давайте же посмотрим как можно получить такой эффект параллакса.

Шаг 1. HTML

Cначало нам необходимо добавить изображение, для этого подойдет любое изображение, нем не нужно его разрезать на слои. Для нашего изображения мы присваиваем класс «card», а вся наша структура помещена в класс «frame»:

</div>

Также не забываем подключить к документу файлы скриптов и стилей, убедитесь, что вы их подключили правильно, иначе наш пример не будет работать. Давайте перейдем к следующему шагу.

Шаг 2. CSS

Оживлять наше изображения будут скрипты, но нам для этого нужно стилизовать изображение и разместить его в позиции которой нам необходимо, за это у нас будет отвечать следующие стили:

.frame {

position: absolute;

top: 50%;

left: 50%;

width: 600px;

height: 400px;

-webkit-perspective: 1000px;

perspective: 1000px;

-webkit-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

}

.frame .card {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

width: 100%;

height: 100%;

background-color: #f3f4ef; border: 5px solid #dedede;

background: white;

box-shadow: 0 0 2px rgba(30, 30, 20, 0.5);

-webkit-transform-origin: 50% 50%;

transform-origin: 50% 50%;

overflow: hidden;

}

.frame .card img {

display: block;

position: relative;

width: 150%;

height: auto;

-webkit-transform-origin: 50% 50%;

transform-origin: 50% 50%;

}

С этим, думаю, не должно возникнуть сложностей, если Вы хоть немного разбираетесь в CSS, по этому не будем на этом останавливаться.

Шаг 3. JS

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

"use strict";"use strict";

var MAX_ROT = 30;var ANIM_SPEED = 0.075;

var frame = undefined, card = undefined, img = undefined, mouse = undefined, userPos = undefined, hover = undefined, padding = undefined, center = undefined;

function lerp(n1, n2, speed) { return (1 - speed) * n1 + speed * n2;}

Array.prototype.lerp = function (target, speed) { var _this = this;

this.forEach(function (n, i) { return _this[i] = lerp(n, target[i], speed); });};

function resize() { var rect = card.getBoundingClientRect(); center = [0.5 * card.clientWidth + rect.left, 0.5 * card.clientHeight + rect.top]; userPos = [center[0], center[1]];}

function loop() { var xPosNorm = undefined, yPosNorm = undefined, mouseDistNorm = undefined, theta = undefined, xRot = undefined, yRot = undefined, imgX = undefined, imgY = undefined;

userPos.lerp(hover ? mouse : center, ANIM_SPEED);

xPosNorm = (center[0] - userPos[0]) / center[0]; yPosNorm = (center[1] - userPos[1]) / center[1];

imgX = xPosNorm * padding[0]; imgY = yPosNorm * padding[1];

mouseDistNorm = Math.sqrt(xPosNorm * xPosNorm + yPosNorm * yPosNorm); theta = Math.atan2(userPos[1] - center[1], userPos[0] - center[0]);

xRot = Math.sin(-theta) * MAX_ROT * mouseDistNorm;

card.style.transform = "rotateX(" + xRot + "deg) rotateY(" + yRot + "deg)"; img.style.transform = "translateX(" + imgX + "px) translateY(" + imgY + "px)"; window.requestAnimationFrame(loop);}

function init() { frame = document.querySelector(".frame"); card = document.querySelector(".card"); img = document.querySelector(".background-img"); mouse = [0, 0]; hover = false; padding = [0.5 * (img.clientWidth - card.clientWidth), 0.5 * (img.clientHeight - card.clientHeight)];

resize();