Все для веб-дизайнера
Изображения для сайта с эффектом параллакса
Давно мы не писали об эффекте параллакса для сайта, в сегодняшнем уроке мы хотим вернуться к этому замечательному приему, ведь в повседневной реализации его становится все больше. Недавно наткнулся на весьма интересный комикс, а именно Photonopia, он реализован на ios и в нем все станицы и изображения анимированны с помощью нашего любимого эффекта. Естественно мы захотели рассказать, как можно реализовать такой прием для обычного изображения и применить его у себя на ресурсе не затратив при этом особых усилий.
Мы хотим показать как можно оживить изображение заставив его реагировать при наведении курсора мыши весьма необычным способом, давайте же посмотрим как можно получить такой эффект параллакса.
Шаг 1. HTML
Cначало нам необходимо добавить изображение, для этого подойдет любое изображение, нем не нужно его разрезать на слои. Для нашего изображения мы присваиваем класс «card», а вся наша структура помещена в класс «frame»:
|
1 2 3 |
<div class="frame"> <div class="card"><img class="background-img" src="img/1.jpg"/></div> </div> |
Также не забываем подключить к документу файлы скриптов и стилей, убедитесь, что вы их подключили правильно, иначе наш пример не будет работать. Давайте перейдем к следующему шагу.
Шаг 2. CSS
Оживлять наше изображения будут скрипты, но нам для этого нужно стилизовать изображение и разместить его в позиции которой нам необходимо, за это у нас будет отвечать следующие стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.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, нам необходимо указать константы скорости и вращения, с последующими их вычислениями при наведении курсора мыши. Про привязку курсора к изображению мы также не забыли:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
"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(); frame.addEventListener("mousemove", function (e) { mouse[0] = e.clientX; mouse[1] = e.clientY; hover = true; }); frame.addEventListener("mouseleave", function () { hover = false; }); loop();} window.onresize = resize;window.onload = init; |
В результате у нас получился замечательный эффект который вы можете использовать на любом сайте к необходимому изображению.
Вот и все. Готово!
Интересно:
| Опубликовал admin 20.09.2017 в 10:02, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...