что такое бэкграунд в анимации
Анимация фона
Анимация снова в моде, как и много лет назад, когда для этой цели применялся GIF. Только сейчас всё делается с помощью стилей, что удобнее и современнее. Так что добавим немного хаоса и движения в этот мир и сделаем фон на веб-странице анимированным?
Почему именно фон? У него куча плюсов. Главное, фон лежит себе на заднем плане и не мешает выводить поверх него остальные элементы. К тому же у background есть множество параметров, включая функции для градиентов, всё это позволяет разнообразить создание фона.
Для начала сделаем пока просто вывод фона для всей страницы без анимации. Стиль получится такой:
Фоновая картинка city.png имеет ширину 1000 пикселей и повторяется без стыков по горизонтали. На рис. 1 она показана в уменьшенном виде. Для красоты добавим на заднем плане градиент, он будет создавать эффект тёмного неба.
Рис. 1. Картинка для фона
Теперь добавляем бесконечную анимацию. Пусть город плавно движется слева направо. Поскольку фон у нас повторяется без стыков, получится зацикленное движение без рывков. В свойстве animation пишем имя нашей анимации city, добавляем линейное движение через linear и ставим infinite для бесконечного повтора. Время анимации определяется методом Подборского, в общем, ставим что больше нравится. У меня 30 секунд.
Теперь переходим к ключевым кадрам. Нам надо только менять позицию фона. Мы знаем, что ширина фона равна 1000px, на это значение и сдвигаем фон.
Пример 1. Анимированный фон
Добавим больше хаоса на страницу и вставим ещё два облака. Ссылаются они на один файл, но двигаться будут по разному.
В итоге у нас получилось аж четыре фона и для background-position их надо все указывать. Чем фоновая картинка хороша, её можно легко позиционировать за пределами окна, задавая отрицательное значение координат. При этом никаких полос прокрутки не появится, это же фон, а не обычный элемент. Так что размещаем облака справа, а двигаться они будут далеко влево. Отдельно задать скорость движения каждого рисунка нельзя, потому что background у нас один, так что регулируем скорость, увеличивая или уменьшая дистанцию движения через background-position (пример 2).
Пример 2. Анимация нескольких фоновых картинок
Анимация фона
Анимация снова в моде, как и много лет назад, когда для этой цели применялся GIF. Только сейчас всё делается с помощью стилей, что удобнее и современнее. Так что добавим немного хаоса и движения в этот мир и сделаем фон на веб-странице анимированным?
Почему именно фон? У него куча плюсов. Главное, фон лежит себе на заднем плане и не мешает выводить поверх него остальные элементы. К тому же у background есть множество параметров, включая функции для градиентов, всё это позволяет разнообразить создание фона.
Для начала сделаем пока просто вывод фона для всей страницы без анимации. Стиль получится такой:
Фоновая картинка city.png имеет ширину 1000 пикселей и повторяется без стыков по горизонтали. На рис. 1 она показана в уменьшенном виде. Для красоты добавим на заднем плане градиент, он будет создавать эффект тёмного неба.
Рис. 1. Картинка для фона
Теперь добавляем бесконечную анимацию. Пусть город плавно движется слева направо. Поскольку фон у нас повторяется без стыков, получится зацикленное движение без рывков. В свойстве animation пишем имя нашей анимации city, добавляем линейное движение через linear и ставим infinite для бесконечного повтора. Время анимации определяется методом Подборского, в общем, ставим что больше нравится. У меня 30 секунд.
Теперь переходим к ключевым кадрам. Нам надо только менять позицию фона. Мы знаем, что ширина фона равна 1000px, на это значение и сдвигаем фон.
Пример 1. Анимированный фон
Добавим больше хаоса на страницу и вставим ещё два облака. Ссылаются они на один файл, но двигаться будут по разному.
В итоге у нас получилось аж четыре фона и для background-position их надо все указывать. Чем фоновая картинка хороша, её можно легко позиционировать за пределами окна, задавая отрицательное значение координат. При этом никаких полос прокрутки не появится, это же фон, а не обычный элемент. Так что размещаем облака справа, а двигаться они будут далеко влево. Отдельно задать скорость движения каждого рисунка нельзя, потому что background у нас один, так что регулируем скорость, увеличивая или уменьшая дистанцию движения через background-position (пример 2).
Пример 2. Анимация нескольких фоновых картинок
Анимированный фон средствами jQuery или «Эй, а ведь круто! Как Flash!»
Занимательные поделки от Джонатана Снука. Данная статья будет интересна скорее новичкам, нежели более умудренным разработчикам, хотя мистер Снук достаточно авторитетен и его методики могут быть полезны всем.
Итак, в данной заметке речь пойдет о том, как не просто заставить фон элеметов страницы вести себя живо, но и сделать это с использованием максимально простой разметки. Все благодарности и вопросы прошу адресовать ее настоящему автору упомянутому выше, я лишь достаточно вольным образом перевожу написанное на его сайте. Также, чтобы читателям не пришлось попусту тратить свое время имеет смысл взглянуть на конечный результат стараний.
Основой для написания данной заметки стала статья Дэйва Ши об использовании спрайтов вместе с jQuery (от себя замечу, что описанная там методика работает немного «не очень» — притормаживает и порой ведет себя неадекватно). И, как было сказано ранее, задача состояла в более удобном способе воплощения задумки Дэйва.
Суть метода описанного здесь лежит в изменении позиции фона элементов. Тем не менее, при всей свой универсальности, jQuery с трудом может справиться с перемещением фона в силу того, что это требует изменения двух значений (вертикальной и горизонтальной позиции фонового изображения) одновременно. Джонатан нашел выход из ситуации при помощи плагина Background-Position Animations (его версия должна быть не ниже 1.0.2 — более ранние не поддерживают отрицательные и десятичные значения).
Что нужно?
jQuery
Джонатан отмечает, что хоть в jQuery и есть метод hover (который включает в себя оба события) более удобным, для жесткого контроля над выполнением, является отдельная отработка событий наведения и удаления указателя мыши. Таким образом скрипт предотвращает повторное воспроизведение анимации при многократном наведении курсора.
Спрайт (тот, что bg.jpg )
В данном случае анимация будет происходить за счет изменения позиции фона слева направо. Выбор картинки лежит сугубо в области фантазии того или иного разработчика. Каждый новый вариант спрайта приводит к новому интересному эффекту.
Еще пример: 
В этом же случае «перемещение» происходит по вертикали. При этом, чем плавнее переход между цветами изображения, тем менее заметно будет перемещение как таковое. Соответственно будет более мягкий эффект затухания (см. пример «Example C: Fade 1-colour»).
«backgroundImageTransition», плавная анимация фоновых изображений
Во время создания front-end составляющей веб приложения, часто приходится сталкиваться с созданием так называемых hover-эффектов. Когда при наведении указателя мыши на DOM элемент меняется цвет ссылки, размер текста или иконка у пункта меню. С такой технологией, как CSS3 Transition, появилась возможность применять анимационные эффекты для DOM-элементов, без использования javascript-кода. Меня эта возможность сразу заинтересовала и я стал применять ее, без лишних усилий создавая плавные переходы. Например:
Пользователи браузеров последних версий получали более симпатичные переходы от одного цвета к другому, в старых же браузерах все оставалось по прежнему и никто ничего не терял.
Меня очень разочаровало отсутствие возможности применять CSS3 Transition для изображений (background-image). Например, если при наведении на пункт меню должна была поменяться иконка и измениться цвет ссылки, то иконка менялась мгновенно, а цвет у ссылки плавно, это совершенно сводило на нет все усилия и смотрелось еще хуже, чем если бы эффектов совсем не было. Оставалось выносить иконку в отдельный элемент или создавать псевдоэлемент и анимировать css — свойство opacity. Но это меняло привычный подход к верстке. Хотелось решения, в котором не нужно было бы заботиться об особой структуре html-разметки, а в случае с псевдоэлементами и css-правил. Соответственно, избежать изменений в разметке и правилах в «старых макетах» (сверстанных ранее с использованием «старой» структуры), в которые было решено добавить плавную анимацию.
Настройки плагина «backgroundImageTransition»
По скольку в большинстве проектов используется библиотека jQuery, для решения этой проблемы было решено написать jquery-плагин, который бы реализовывал плавные трансформации для фоновых изображений, т.е для background-image.
В качестве селектора плагину передается элемент или коллекция элементов которым требуется добавить возможность трансформации фона из одного изображения в другое.
Основные настройки трансформаций у плагина сделаны по аналогии с CSS3 Transition:
| Свойство | Значение по умолчанию | Возможные значения | Описание |
|---|---|---|---|
| transition-duration | 0 | число в миллисекундах (int) | определяет длительность анимированного перехода |
| transition-timing-function | swing | название функции расчета промежуточных значений (string) | определяет функцию для расчета промежуточных значений |
| transition-delay | 0 | число в миллисекундах (int) | определяет паузу перед началом анимации |
Расширить возможные значение функции transition-timing-function, можно добавив соответствующий jquery-плагин.
Дополнительные настройки плагина:
| pseudo-class | : hover | : hover,: focus,: active | связывает поведение плагина с определенным псевдоклассом |
| eventActivate | mouseenter | jquery событие (string) | событие, активирующее анимацию |
| eventDeActivate | mouseleave | jquery событие (string) | событие, активирующее обратную анимацию |
Рекомендуется использовать параметр pseudo-class. Он связывает поведение плагина с определенным псевдоклассом. Если нужно расширить поведение, то следует использовать свойства eventActivate и eventDeActivate в них можно передавать событие по которому запустится анимация. Тогда определять опцию pseudo-class не нужно, она является приоритетной и перекроет настройки eventActivate, eventDeActivate (эти параметры следует использовать только тогда, когда есть точное понимание, как они будут работать).
Принцип работы.
backgroundImageTransition.js создает два блока с абсолютным позиционированием и располагает их по верх слоя селектора, первый блок содержит исходное изображение, второй блок изображение в которое трансформируется исходное. Блоки создаются только на время анимации, т.е после завершения анимации они удаляются. Трансформация между блоками происходит по средствам css-свойства opacity. Рассмотрим следующий пример:
Есть html-разметка меню:
Активируем плагин (для наглядности передадим плагину псевдокласс на который будет реагировать анимация).
backgroundImageTransition поддерживает работу со спрайтами:
Между изображениями также будет выполнен плавный переход по выше приведенной схеме.
Если в качестве параметра pseudo-class используется значение : focus, то оно будет работать только для форм (input, textarea и прочие элемент форм).
Анимированный фон веб-страницы на чистых HTML и CSS
Хочешь знать больше про веб?
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Перевод статьи «Amazing Pure HTML and CSS background animations».
Анимации — это круто, правда? Они добавляют изюминку на сайт и позволяют ему выделиться на фоне конкурентов. Но бывает, что вы решили создать сайт исключительно на HTML и CSS, и это несколько ограничивает полет вашей фантазии. И совершенно зря! Даже если у вас в наборе только эти два инструмента, вы все равно можете достигнуть потрясающих визуальных эффектов. В этой статье вы найдете несколько идей, от которых сможете отталкиваться в дальнейшем.
Диагональный градиент
Написать такой код легко, а эффект получается очень интересный.
Скольжение диагоналей
Предыдущий эффект был очень ненавязчивым, а этот гарантированно привлекает внимание.
Анимированный фон
Обратите внимание, насколько прост сам бэкграунд и насколько меняется его восприятие благодаря анимации.
Бесконечный паттерн
Отдельное спасибо @keyframes за бесконечную прокрутку!
Прекрасный анимированный бэкграунд
Просто задержитесь на мгновение и насладитесь тем, насколько привлекательна эта анимация. Такое приятное смешение цветов, а между тем оно совершенно не отвлекает внимание от названия на переднем плане.
Анимированный «лесной» фон
Плавающие квадраты
See the Pen Pure Css Animated Background by Mohammad Abdul Mohaiman (@mohaiman) on CodePen.
Снова диагональные линии
Плывущие облака
Да, в названии заявлено, что все на чистом СSS, но когда я увидел этот фон, не смог не добавить его в коллекцию, несмотря на то, что здесь использован CSS(Less).
Надеюсь, эти идеи вдохновят вас на создание собственных интересных эффектов. Поиграйтесь с приведенными CodePen-ми: возможно, таким образом и у вас родится замечательная идея.