Было так, что, заходя на какой – то сайт Вы увидели красивую анимацию? Всплывающие картинки, бегущие строки, дождик прямо на страничке, танцующие зверьки, растворяющиеся кнопки, мерцающие картинки, блестящие иконки и многое другое. Все, на что хватило фантазии создателю сайта. Думаете это сложно и требует написания громоздкого кода? Нет. Есть способ разместить анимацию на сайте от популярного сервиса WordPress. Об этом чуть ниже.
Зачем нужна CSS анимация?
Анимация призвана, в первую очередь, привлечь внимание посетителей ресурса, не только к самому сайту, но и к определенным частям. Если Вы хотите заострить на чем-то внимание клиента, то это идеальный вариант. Например, Ваш сайт предлагает скидки только одну неделю. Можно выделить «-10%» с помощью анимации, тогда это предложение точно не останется незамеченным. Контент станет более необычным и ярким.
Причина, по которой стоит пользоваться CSS-анимацией
Данный вид в несколько раз легче video- или flash-элементов. Для того, чтобы добавить элемент в шаблон WordPress нет необходимости изучать языки программирования. Она не требует долгой загрузки и распознается практически всеми известными браузерами.
Добавление css-анимации на сайт на WordPress
Чтобы добавить анимационный эффект потребуется зайти на сайт WordPress и воспользоваться специальным плагином CSS Animate IT. Этот плагин помогает создавать собственную для HTML-сайта анимацию с использованием визуального редактора.
- Для начала необходимо установить Animate IT, а потом активировать его. Тут не нужно ничего настраивать, все уже готово к работе. Плагин содержит больше пятидесяти средств анимации, возможно поместить в виджеты анимационный эффект.
- После нужно создать запись. В редакторе автоматически появится кнопка «Animate it». Кликнув ее, всплывет окно, позволяющее подобрать стиль анимации. Плагин поддерживает очень много различных визуальных эффектов, осталось только подобрать ее стиль, время торможения и пр. И, в конце, нужно установить признак, при котором анимация оживет: клик мышки, положение курсора, прокручивание вниз. После чего нужно нажать на «Animate it» для предварительного просмотра эффектов анимации. Чтобы добавить готовую картинку на страницу нужно нажать кнопку «Вставить».
После того, как используете «Вставить» анимация с шаблонным примером добавится. Останется только заменить текст на необходимый, добавить картинку. Любуйтесь анимацией.
