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

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

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

</div>

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

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

Шаг 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); }

}

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