Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Как установить анимацию на фоне?

Дата:23.01.16 в 14:14
Раздел: 

Сегодня речь пойдет о том, как можно добавить на сайт анимацию, которая будет прикреплена к фону контейнера.

Как установить анимацию на фоне

В последнее время стало очень популярным добавление небольшой анимации на сайт. Это придает эффект реальности в некотором плане. Вследствие этого все чаще и чаще слышишь про программу 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+

Оценок: 2 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)