Автор

11 10.2014
Эффект «живого фона» для сайта с помощью CSS

Эффект «живого фона» для сайта с помощью CSS


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

 

ДЕМО
ИСХОДНИКИ

 

Такой фон станет отличным дополнением для персональной страницы на котором будет отображена целевая информация или для станицы-заглушки. И так, давайте приступим.

 

Шаг 1. HTML

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

<div class="image-wrap small">
<div class="background"></div>
<div class="bulb1"></div>
<div class="bulb2"></div>
<div class="bulb3"></div>
</div>

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

 

Шаг 2. CSS

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

.image-wrap {
position:relative;
width:100%;
margin:0 auto;
overflow:hidden;
}
.image-wrap.small .background{
background:url(/img/background.jpg) no-repeat;
background-size:cover;
width:100%;
height:650px;
position:relative;
}
.image-wrap.small .bulb1{
background:url(/img/bulb-1.png) no-repeat center center;
background-size:contain;
position:absolute;
width:272px;
height:412px;
left:42%;
top:0%;
z-index: 3;
animation: pendulum1 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
-webkit-animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
transform-origin:center top;
}
.image-wrap.small .bulb2{
background:url(/img/bulb-2.1.png) no-repeat center center;
background-size:contain;
position:absolute;
z-index: 1;
width:144px;
height:418px;
left:36%;
top:21%;
z-index: 2;
animation: pendulum 9s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
-webkit-animation: pendulum 9s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
transform-origin:center top;
}
.image-wrap.small .bulb3{
background:url(/img/bulb-3.png) no-repeat center center;
background-size:contain;
position:absolute;
width:72px;
height:309px;
left:32%;
top:266px;
z-index: 1;
animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
-webkit-animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
transform-origin:center top;
}
.image-wrap.small .bulb1:hover{
}
.image-wrap.small .bulb2:hover{
}
.image-wrap.small .bulb3:hover{
}
@-webkit-keyframes
pendulum {
0%, 100% { transform: rotate(2deg); }
25%, 75% { transform: rotate(-4deg); }
50% { transform: rotate(4deg); }
}
pendulum1 {
0%, 100% { transform: rotate(.6deg); }
25%, 75% { transform: rotate(-1.2deg); }
50% { transform: rotate(1.2deg); }
}
@keyframes pendulum {
0%, 100% { transform: rotate(2deg); }
25%, 75% { transform: rotate(-4deg); }
50% { transform: rotate(4deg); }
}
pendulum1 {
0%, 100% { transform: rotate(.6deg); }
25%, 75% { transform: rotate(-1.2deg); }
50% { transform: rotate(1.2deg); }
}

Как вы заметили мы подключили четыре изображения, три из которых это будут лампочки, которым мы задаем эффект трансформации по осям, а четвертое - фон, который будет создать эффект перспективы изображений.

Вот и все. Готово!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

29 09.2014
Эффект «живого фона» для сайта с помощью CSS

Крупные заголовки сайта стали весьма популярны, эта тенденция развивается достаточно быстро на рынке веб-дизайна, сегодня мы бы хотели предоставить коллекцию анимированных фоновых заголовков для вашего вдохновения. Мы будем использовать Canvas и Javascript, чтобы создать анимированный фон для крупных заголовков.


30 09.2017
Эффект «живого фона» для сайта с помощью CSS

Анимация с поддержкой CSS, которая заменяет обновление страницы при обновлении контента с помощью jQuery.


24 06.2011
Эффект «живого фона» для сайта с помощью CSS

Как высказался руководитель компании UMIHOST в своем блоге Антон Приходько – Все студии и фрилансеры, занимающиеся изготовлением сайтов, где-то эти сайты в итоге размещают. Редко клиент сам заботится о хостинге своего сайта, а тем более, занимается собственно размещением сайта — чаще всего сайт живет там, куда его «поселил» изготовитель.

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

  1. Как выбрать место размещения сайта таким образом, чтобы не опростоволоситься в глазах заказчика? Чем стабильнее будет работать сайт, тем больше доверия к изготовителю: и карма от этого улучшается, и доверие в итоге окупается.
  2. Как выбрать место для размещения сайта таким образом, чтобы сайт не только стабильно работал, но еще и приносил своему создателю выгоду?

21 04.2013
Эффект «живого фона» для сайта с помощью CSS

Если вы используете какие то графические редакторы на сайте, или просто хотите скрасить некий материал с помощью выбора цвета, или дать возможность оформить на свой вкус комментарии пользователю тогда этот урок именно для Вас. В сегодняшнем уроке речь пойдет о скрипте Flexi Color Picker, который использует только JavaScript для создания интерфейса выбора цвета. Без flash, изображений, однопиксельных div. Для его работы не нужно никаких библиотек.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close