Ноябрь 4, 2019 Запись была обновлена
Объемное фоновое изображение на CSS и Javascript
Из этой статьи Вы узнаете, как фоновое изображение сделать объемным с помощью CSS и Javascript. Но это не обычное фоновое изображение, потому что оно будет изменяться в зависимости от положения курсора мыши. Эффект действительно интересный и применение ему можно найти на любом сайте. Ведь креативные эффекты выделяют сайт среди обычных стандартных. Также данный эффект очень подходит для лендингов.
Рекомендую:
- Адаптивное фоновое изображение для сайта
- Слайд-шоу на фоновом изображении
- 8 сервисов создания текстуры для сайта
Перейдите по ссылке ниже и проверьте работу данного эффекта в своём браузере:
Посмотреть примерСкачать
Важно! Данный эффект использует некоторые CSS свойства, которые работают только в современных браузерах (3D Transforms). Эффект работает только при наведении, поэтому Вы не увидите эффект на мобильных устройствах с сенсорными экранами.
Скриншот данного эффекта в действии:
Как установить такое фоновое изображение?
HTML часть
Начнем с подключения нужных стилей и HTML разметки. Между тегами <head> </head> подключаем стили (tilteffect.css):
1 | <link rel="stylesheet" type="text/css" href="css/tilteffect.css" /> |
Затем задаем для нужного изображения класс "tilt-effect":
1 2 3 | <div class="box"> <img class="tilt-effect" src="img/1.jpg" alt="Описание изображения" /> </div> |
Несколько слов по коду:
- Строка: 1 — блок, в котором указана ширина и высота (это важно!).
- Строка: 2 — изображение, к которому будет применяться эффект.
То есть необходимо "обернуть" изображение в еще один блок, у которого указать ширину и высоту. Попробуйте это сделать самостоятельно и Вы поймете о чем идет речь.
Несколько слов хочу сказать о настройках данного эффекта, потому что они у него есть. Полный список настроек и значений находится в конце страницы с примерами.
Настройки для каждого отдельного изображения необходимо писать в атрибуте "data-tilt-options"
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>:
1 | <script src="js/tiltfx.js"></script> |
Установка закончена!
Вывод
Данный эффект не изменит кардинальным образом Вашу продающую страницу или сайт, но, например, эффект объемного фонового изображения однозначно запомниться посетителю. Здесь также присутствует интерактивность, потому что изображение реагирует на курсор мыши. В процессе установки на свой сайт я думаю также не возникнет никаких трудностей.
Успехов!
Источник: Оригинал
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Фоновое изображение не работает. Не при просмотре скаченного файла, естественно при установке. Тестила на Мозилле и Хроме. Остальные картинки «пляшут» нормально. ❓