Зачастую нужно обратить внимание пользователя на определенный, центральный элемент на сайте сайте. Для этих целей часто используют анимацию на сайте с помощью CSS и Jquery.
Существует множество плагинов создания анимации на сайте и в данной статье мы расскажем о тех, с которыми работали сами.
ANIMATE.css
Наверно самая популярная библиотека создания анимации блоков, текстов, изображений на сайте.
Как настроить анимацию с помощью Animate.css
Первым делом необходимо загрузить файл стилей в корневую директорию сайта и подключить его. Далее подключаем его в макет сайта
После этого можно анимировать объекты, для этого необходимо добавить класс соответствующей анимации. Все классы доступны на сайте плагина.
http://daneden.github.io/animate.css/
CSSHAKE
Еще один достойный и очень простой плагин создания анимации на сайте. Можно настроить как постоянную анимацию объекта, так и при наведении.
Для использования на сайте необходимо скачать и залить файл со стилями нужную директорию сайта. Далее подключить его
Теперь можно использовать, например для того, чтобы при наведении элемент начал трястись, нужно указать ему class=»chake».
Например:
Как видите все очень просто. Иногда мы используем «shake» для анимации форм на сайте, которые начинают трястись после неудачного ввода данных.
На официальном сайте размещена вся документация и примеры использования. Также возможно создание пользовательской анимации. Теперь все зависит только от Вашей фантазии.
http://elrumordelaluz.github.io/csshake/
HOVER CSS
Также очень простой, но не менее полезный плагин создания анимации. Позволяет анимировать не только различные элементы сайта, но и иконки в элементах. Все эффекты активируются при наведении.
На официальном сайте есть полный перечень эффектов, которых будет достаточно для использования в любом проекте.
Для использования плагина необходимо скачать и загрузить его в нужную директорию сайта, после чего подключить.
Теперь достаточно задать блоку, картинке, тексту и т.д. соответствующий класс.
http://ianlunn.github.io/Hover/
Вместо заключения
Мы рассмотрели самые удобные и простые в использовании плагина, но не смотря на простоту они обладают настолько широким функционалом, что ограничением является только Ваша фантазия.