Сегодня речь пойдет о том, как можно добавить на сайт анимацию, которая будет прикреплена к фону контейнера.
В последнее время стало очень популярным добавление небольшой анимации на сайт. Это придает эффект реальности в некотором плане. Вследствие этого все чаще и чаще слышишь про программу Flash. С ее помощью можно создавать интерактивные анимации, которые в дальнейшем вставляются на сайт. Существует также более старый способ, который в последнее время стал очень популярным в социальных сетях. Речь идет о изображениях в формате .gif, которые обладают способностью последовательно менять кадры. Благодаря этому можно создать анимацию.
Чтобы создать свою анимацию, которая попадет на сайт, не требуется большого ума или сверхспособностей. В первую очередь нужен графический редактор. Вполне подойдет один из самых популярных - Adobe Photoshop. В этой среде создается анимированная картинка. Кроме этого существует много сайтов с целыми библиотеками готовых анимашек, если тебе лень создавать свой документ, можешь порыться в интернете и найти достойную анимацию. А после этого все просто элементарно, работаем в том же режиме, когда нам нужно установить обычную фоновую картинку, то есть обращаемся к свойству background, как это показано в примере
CSS
.animation { background: #eee url(animation.gif) no-repeat left top; }
На заметку
При использовании анимации следует помнить, что они привлекают к себе внимание. В одних случаях это может сыграть вам на руку, а в других — помешать. К примеру, когда анимация будет отвлекать пользователя от изучения основной информации сайта.
В каких браузерах работает?
| 4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
