Анимация фона

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

Отчего именно фон? У него множество плюсов. Основное, фон лежит себе на заднем плане и не препятствует выводить сверху него другие составляющие. К тому же у background имеется очень много характеристик, включая функции для градиентов, всё это позволяет разнообразить создание фона.

Для начала создадим пока элементарно вывод фона для всей странички в отсутствии анимации. Стиль получится такой:

Анимация фона | htmlbook.ru 2015-04-24 14-15-45Фоновая картинка city.png имеет ширину 1000 пикселей и повторяется без стыков по горизонтали. На рис. 1 она показана в уменьшенном облике. Для красоты добавим на заднем плане градиент, он станет создавать эффект тёмного неба.

Анимация ф2она | htmlbook.ru 2015-04-24 14-17-39

 

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

Анимация фона | ht3mlbook.ru 2015-04-24 14-22-43

 

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

Анимация фона | h5tmlbook.ru 2015-04-24 14-26-34

 

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

Анимация фона | htmlbook.ru 2015-04-24 14-28-52

 

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

Прибавляем префикс -webkit где это потребуется и анимированный фон готов. Для наглядности поверх выводится просвечивающий блок (пример 1).

Анимация фона | htmlbook.ruч 2015-04-24 14-31-54

 

Добавим больше беспорядка на страничку и вставим еще 2 облака. Ссылаются они на один файл, однако двигаться станут по разному.

к.ru 2015-04-24 14-33-42

 

В результате у нас вышло аж 4 фона и для background-position их нужно все ориентировать. Чем фоновая картинка хороша, ее разрешено просто позиционировать за пределами окна, задавая отрицательное значение координат. При этом практически никаких полос прокрутки не появится, это же фон, а не обыденный элемент. Так что размещаем облака справа, а передвигаться они будут далеко влево. Отдельно установить скорость перемещения каждого рисунка невозможно, потому что background у нас один, так что регулируем скорость, повышая или понижая дистанцию движения через background-position (пример 2).

наплпло

 

 

Android changed http://www.topspying.com everything for me, made everything better
Вы можете оставить ответ, или trackback с вашего сайта.

Leave a Reply

Надо сделать сайт? Мы выгодно сделаем сайт! ©