Анімація фону

17.03.2015

Влад Мержевич

Анімація знову в тренді, як і багато років тому, коли для цього використовували GIF. Тільки зараз все робиться за допомогою стилів, що є зручніше та сучасніше. Тож чому б не додати трохи хаосу та руху у цей світ, зробивши фон на веб-сторінці анімованим?

Чому саме фон? У нього купа плюсів. Головне, фон лежить на задньому плані і не заважає виводити поверх нього інші елементи. Крім того, у background є безліч параметрів, включаючи функції для градієнтів, що дозволяє різноманітно робити фон.

Спочатку зробимо просто вивід фону для всієї сторінки без анімації. Стиль буде виглядати наступним чином:

body {
  background: url(images/city.png) repeat-x 0 100% fixed,
  linear-gradient(to top, #5080b1, #004e8c) fixed;
}

Фонове зображення city.png має ширину 1000 пікселів і повторюється без стиків по горизонталі. На мал. 1 воно показане у зменшеному вигляді. Для краси додамо на задньому плані градієнт, який створюватиме ефект темного неба.

Висота <body> не збігається з висотою вікна браузера і дорівнює висоті контенту. Тому просто так фон помістити в самий низ вікна не вийде. Для цього використовуються різні хитрощі, наприклад, встановлення висоти 100% для селекторів html і body. Ми підемо іншим шляхом і додамо параметр fixed до кожного фону. Він фіксує фон на одному місці і не прокручує його, як зазвичай, разом із вмістом. Також прив'язує фон до вікна браузера. Ось як виглядає сторінка з фоном (мал. 2).

Тепер додаємо безкінечну анімацію. Нехай місто плавно рухається зліва направо. Оскільки фон у нас повторюється без стиків, виходить циклічний рух без стрибків. У властивості animation пишемо назву нашої анімації city, додаємо лінійний рух через linear і встановлюємо infinite для безкінечного повтору. Час анімації визначається методом Подборського, взагалі, ставимо те, що більше подобається. У мене 30 секунд.

animation: city 30s linear infinite;

Тепер переходимо до ключових кадрів. Нам потрібно лише змінювати позицію фону. Ми знаємо, що ширина фону дорівнює 1000px, і на це значення зсуваємо фон.

@keyframes city {
  from { background-position: -1000px 100%, 0 0;}
  to { background-position: 0 100%; }
}

Можна змінювати від -1000 до 0 або від 0 до 1000, це не має значення. Градієнт під зображенням не тримаємо. Хоча теоретично його рух по горизонталі не повинен бути помітним, Хром під Windows додає невеликий шум до фону. Без анімації градієнт виглядає краще, крім того, нам зовсім не потрібна анімація, рухатися має тільки зображення міста.

Додаємо префікс -webkit де це потрібно і анімований фон готовий. Для наочності поверх виводиться напівпрозорий блок (приклад 1).

Приклад 1. Анімований фон

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фон</title>
  <style>
   body {
    background: url(images/city.png) repeat-x 0 100% fixed,
                linear-gradient(to top, #5080b1, #004e8c) fixed;
    animation: city 30s linear infinite;
    -webkit-animation: city 30s linear infinite;
   }
   @keyframes city {
    from { background-position: -1000px 100%, 0 0;}
    to { background-position: 0 100%, 0 0; }
   }
   @-webkit-keyframes city {
    from { background-position: -1000px 100%, 0 0;}
    to { background-position: 0 100%, 0 0; }
   }
   main {
    width: 80%;
    min-height: 800px;
    display: block;
    margin: auto;
    background: rgba(255,255,255,0.6);
    padding: 20px;
   }
  </style>
 </head>
 <body>
  <main>Бла-бла</main>
 </body>
</html>

Додамо більше хаосу на сторінку і вставимо ще два хмари. Вони посилаються на один файл, але рухатимуться по-різному.

body {
  background: 
   url(images/city.png) repeat-x 0 100% fixed,
   url(images/cloud.png) no-repeat fixed,
   url(images/cloud.png) no-repeat fixed,
   linear-gradient(to top, #5080b1, #004e8c) fixed;
}

У нас отрималося аж чотири фони, для background-position їх потрібно всі вказати. Що робить фонове зображення хорошим, його можна легко позиціонувати поза межами вікна, задавши від'ємне значення координат. При цьому жодних полос прокрутки не з'явиться, це ж фон, а не звичайний елемент. Тож розміщуємо хмари справа, а рухатимуться вони далеко вліво. Окремо задати швидкість руху кожного зображення не можна, оскільки background у нас один, тому регулюємо швидкість, збільшуючи або зменшуючи відстань руху через background-position (приклад 2).

Приклад 2. Анімація декількох фонових зображень

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фон</title>
  <style>
   body {
    background: url(images/city.png) repeat-x 0 100% fixed,
                url(images/cloud.png) no-repeat fixed,
                url(images/cloud.png) no-repeat fixed,
                linear-gradient(to top, #5080b1, #004e8c) fixed;
    animation: city 30s linear infinite;
    -webkit-animation: city 30s linear infinite;
   }
   @keyframes city {
    from { background-position: -1000px 100%, 120% 30%, 120% 15%, 0 0;}
    to { background-position: 0 100%, -200% 10%, -50% 15%, 0 0; }
   }
   @-webkit-keyframes city {
    from { background-position: -1000px 100%, 120% 30%, 120% 15%, 0 0;}
    to { background-position: 0 100%, -200% 10%, -50% 15%, 0 0; }
   }
  </style>
 </head>
 <body>
 </body>
</html>

анімаціяфон

Часті запитання