Эффект живого фона.

Здравствуйте, друзья, читатели и гости блога. Красивый эффект живого фона обязательно заставит обратить на себя внимание. Без сторонних скриптов и только с использованием стилей CSS. Сама разметка HTML совершенно простая. Что-то подобное мы уже делали вот здесь.

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

Для начала нужно приготовить фоновое изображение в формате jpg и картинки, 1 или 3 разных, в формате png или gif, которые будут раскачиваться. И всё.

Теперь сама, cовершенно простая, разметка HTML.

<div class="image-wrap small">
<div class="background">здесь, при желание, весь ваш текст</div>
<div class="bulb1"></div>
<div class="bulb2"></div>
<div class="bulb3"></div>
</div>

И код CSS. Скопируйте его в блокнот и разберёмся с изображениями.

<style>.image-wrap {
position:relative;
width:100%;
margin:0 auto;
overflow:hidden;
}
.image-wrap.small .background{
background:url(здесь адрес картинка основного фона jpg) no-repeat;
background-size:cover;
width:100%;
height:650px;
position:relative;
}
.image-wrap.small .bulb1{
background:url(адрес 1 картинки gif) 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(адрес второй картинки gif) 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(адрес 3 картинки gif) 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); }
}</style>

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

Теперь, когда коды готовы, в редакторе сообщений перейти в режим HTML и вставляем их один под другим. Если вернётесь в обычный режим, будет чистое поле. Нажмите на функцию просмотра и увидите, что получилось.

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

Вдохновение с сайта http://s-sd.ru/

Всем добрых и тёплых денёчков и до новых встреч. 

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email