Лого www.SiteHere.ru

Объемное фоновое изображение на CSS и Javascript

Из этой статьи Вы узнаете, как фоновое изображение сделать объемным с помощью CSS и Javascript. Но это не обычное фоновое изображение, потому что оно будет изменяться в зависимости от положения курсора мыши. Эффект действительно интересный и применение ему можно найти на любом сайте. Ведь креативные эффекты выделяют сайт среди обычных стандартных. Также данный эффект очень подходит для лендингов.

Рекомендую:

PDF отчет

Перейдите по ссылке ниже и проверьте работу данного эффекта в своём браузере:

Посмотреть примерСкачать

Важно! Данный эффект использует некоторые CSS свойства, которые работают только в современных браузерах (3D Transforms). Эффект работает только при наведении, поэтому Вы не увидите эффект на мобильных устройствах с сенсорными экранами.

Скриншот данного эффекта в действии:

Объемное фоновое изображение

Как установить такое фоновое изображение?

HTML часть

Начнем с подключения нужных стилей и HTML разметки. Между тегами <head> </head> подключаем стили (tilteffect.css):

HTML КОД
1
<link rel="stylesheet" type="text/css" href="css/tilteffect.css" />

Затем задаем для нужного изображения класс "tilt-effect":

HTML КОД
1
2
3
<div class="box">
	<img class="tilt-effect" src="img/1.jpg" alt="Описание изображения" />
</div>

Несколько слов по коду:

  • Строка: 1 — блок, в котором указана ширина и высота (это важно!).
  • Строка: 2 — изображение, к которому будет применяться эффект.

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

Несколько слов хочу сказать о настройках данного эффекта, потому что они у него есть. Полный список настроек и значений находится в конце страницы с примерами.

Настройки для каждого отдельного изображения необходимо писать в атрибуте "data-tilt-options"

HTML КОД
1
2
3
<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>:

HTML КОД
1
<script src="js/tiltfx.js"></script>

Установка закончена!

Вывод

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

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

Из чего состоит любой сайт? HTML
+
CSS
+
JS
Технологии не поддаются обучению?
1 комментарий к записи
  • ЯНЕЛЕНА

    Фоновое изображение не работает. Не при просмотре скаченного файла, естественно при установке. Тестила на Мозилле и Хроме. Остальные картинки «пляшут» нормально. ❓

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *