Loading...

Как добавить анимацию на сайт с помощью CSS 3

Как добавить анимацию на сайт с помощью CSS 3

Зачастую нужно обратить внимание пользователя на определенный, центральный элемент на сайте сайте. Для этих целей часто используют анимацию на сайте с помощью CSS и Jquery.

Существует множество плагинов создания анимации на сайте и в данной статье мы расскажем о тех, с которыми работали сами.


ANIMATE.css

Наверно самая популярная библиотека создания анимации блоков, текстов, изображений на сайте.

Как настроить анимацию с помощью Animate.css

Первым делом необходимо загрузить файл стилей в корневую директорию сайта и подключить его. Далее подключаем его в макет сайта

После этого можно анимировать объекты, для этого необходимо добавить класс соответствующей анимации. Все классы доступны на сайте плагина.

http://daneden.github.io/animate.css/


CSSHAKE

Еще один достойный и очень простой плагин создания анимации на сайте. Можно настроить как постоянную анимацию объекта, так и при наведении.

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

Теперь можно использовать, например для того, чтобы при наведении элемент начал трястись, нужно указать ему class="chake".

Например:

Как видите все очень просто. Иногда мы используем "shake" для анимации форм на сайте, которые начинают трястись после неудачного ввода данных.

На официальном сайте размещена вся документация и примеры использования. Также возможно создание пользовательской анимации. Теперь все зависит только от Вашей фантазии.


HOVER CSS

Также очень простой, но не менее полезный плагин создания анимации. Позволяет анимировать не только различные элементы сайта, но и иконки в элементах. Все эффекты активируются при наведении.

На официальном сайте есть полный перечень эффектов, которых будет достаточно для использования в любом проекте.

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

Теперь достаточно задать блоку, картинке, тексту и т.д. соответствующий класс.

Вместо заключения

Мы рассмотрели самые удобные и простые в использовании плагина, но не смотря на простоту они обладают настолько широким функционалом, что ограничением является только Ваша фантазия.

ДИЗАЙН, РАЗРАБОТКА, СОПРОВОЖДЕНИЕ САЙТОВ И МОБИЛЬНЫХ ПРИЛОЖЕНИЙ в г. Владикавказ, г. Москва, г. Санкт-Петербург

+7 (918) 834 39 05 / info@abeta.ru / Карта сайта