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

эффект живого фона
Здравствуйте, друзья, читатели и гости блога. Красивый эффект живого фона обязательно заставит обратить на себя внимание. Без сторонних скриптов и только с использованием стилей 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


16 комментариев:

  1. Добрый день, Вика. Очень мило выглядит. Надо попробовать. А в эту чистую водичку так и хочется окунуться. Спасибо.

    ОтветитьУдалить
  2. Любовь, здравствуйте. Если сделаете дайте знать, хочется варианты ещё посмотреть. А то у меня и правда в такую жару на ум ничего не идёт. Сначала повесила лампочки но решила с водой поиграться.

    ОтветитьУдалить
  3. Вика. Приглашаю на лесную полянку посмотреть, что получилось http://00149.blogspot.ru/2016/06/blog-post_23.html

    ОтветитьУдалить
  4. Я посмотрела. Здорово всё получилось. Комментарий у Вас в блоге.

    ОтветитьУдалить
  5. Благодарю, Вика, за науку. Интересно искать разные варианты.

    ОтветитьУдалить
  6. Прикольно :)
    Умеешь ты удивить, Вика. Однозначно, в закладки. Спасибо!

    ОтветитьУдалить
  7. Наташа, вообще это на самом деле может пригодится для всякого рода поздравлений и украшений. Вот Любовь свой вариант придумала.

    ОтветитьУдалить
  8. Любовь, Вы правы. Даже сам процесс создания интересный.

    ОтветитьУдалить
  9. Я посмотрела на блоге Любовь Семёновны живую картинку. Так интересно! Думаю, что и мне пригодиться! СПАСИБО!

    ОтветитьУдалить
  10. Любовь Семёновна! Такие замечательные картинки подобрала - обезьянки и по-моему, кенгуру, играющий в мяч.

    ОтветитьУдалить
  11. Ирина, тут дай только волю фантазии. Пользуйтесь на здоровье.

    ОтветитьУдалить
  12. Да, я видела, очень красиво получилось)
    Вика, у тебя тоже древовидные комментарии не работают или ты их отключила?

    ОтветитьУдалить
  13. Да, Наташа тоже обратила внимание на это дело несколько дней назад. Сама не отключала.

    ОтветитьУдалить
  14. Загадочная история..

    ОтветитьУдалить
  15. Вика, добрый день. Почему-то уже хочется перейти на "ты". Мы всё-таки в одной "весовой категории" - обе бабушки. Если не против...
    Хочу предложить посмотреть ещё один вариант живой картинки http://00149.blogspot.ru/2016/06/blog-post.html
    Очень уж понравился процесс.

    ОтветитьУдалить
  16. Люба, я обеими руками за. Ну а картинка-я до такого точно не додумаюсь. Супер.

    ОтветитьУдалить

Пользовательский поиск