Хай! В данном уроке вы узнаете, как обычное изображение сделать объемным с помощью обычного CSS и обычного Javascript:)
На самом деле, в итоге, выйдет не обычное изображение, потому что оно будет изменяться в зависимости от положения курсора мыши. Эффект действительно интересный и применение ему можно найти на любом сайте. Помните, что именно креативные эффекты выделяют сайт среди обычных стандартных. Данный эффект может быть не заменим также в лендингах.
ВНИМАНИЕ
Эффект работает только при наведении, поэтому Вы не увидите эффект на мобильных устройствах с сенсорными экранами.
HTML
Начнем с подключения нужных стилей и HTML разметки. Между тегами <head> </head> подключаем стили (tilteffect.css):
<link rel="stylesheet" type="text/css" href="css/tilteffect.css" />
Затем задаем для нужного изображения класс "tilt-effect":
<div class="box"> <img class="tilt-effect" src="img/1.jpg" alt="Описание изображения" /> </div>
Несколько слов по коду:
Создаем блок, в котором указываем ширину и высоту.
Добавляем изображение, к которому будет применяться эффект.
То есть необходимо "обернуть" изображение в еще один блок, у которого указать ширину и высоту.
Несколько слов хочу сказать о настройках данного эффекта, потому что они у него есть.
extraImgs
Количество дополнительных слоев с изображением; min:1, max:5
extraImgs : 2
opacity
Прозрачность дополнительных слоев
opacity : 0.7
bgfixed
Движение первого слоя; по умолчанию он статичен
bgfixed : true
movement
Настройки для каждого отдельного дополнительного слоя
movement : { ... }
perspective
Значение перспективы для 3D преобразования
perspective : 1000
translateX
Относительное смещение по оси X. Положительное значения данного свойства указывает на сколько смещается дополнительный слой по направлению движения указателя мыши. Если мы зададим отрицательное значение, тогда дополнительный слой будет смещаться в сторону противоположную движению указателю мыши.
translateX : -10
translateY
Относительное смещение по оси Y.
translateY : -10
translateZ
Относительное смещение по оси Z. Данное свойство применяется, когда указатель мыши перемещается вертикально. Для этого свойства должно быть задано значение перспективы.
translateZ : 20
rotateX
Относительный поворот по оси X. Для этого свойства должно быть задано значение перспективы.
rotateX : 2
rotateY
Относительный поворот по оси Y. Для этого свойства должно быть задано значение перспективы.
rotateY : 2
rotateZ
Относительный поворот по оси Z. Для этого свойства должно быть задано значение перспективы.
rotateZ : 0
Настройки для каждого отдельного изображения необходимо писать в атрибуте "data-tilt-options"
<div class="box">
<img class="tilt-effect" src="img/1.jpg" alt="Описание изображения" data-tilt-options='{ "extraImgs" : 4, "opacity" : 0.5,
"movement": { "perspective" : 500, "translateX" : -15,
"translateY" : -15, "translateZ" : 20, "rotateX" : 15,
"rotateY" : 15 } }' />
</div>
Javascript
Никаких jQuery библиотек подключать не нужно ("ура-ура" скажут многие). Нужен лишь один скрипт (tiltfx.js), его можно взять в архиве с исходниками. Его подключаем перед закрывающим тегом </body>:
<script src="js/tiltfx.js"></script>
Итог
Хоть создание объемных изображений не изменит кардинальным образом ваш сайт, но эффект однозначно запомниться посетителю. Здесь также присутствует интерактивность, потому что изображение реагирует на курсор мыши. Также если хорошенько разобраться, то проделать подобное на своем сайте не создаст больших трудностей. Всем добра:) Увидимся!