CSS-анимация появления без плагинов

CSS анимация для сайта

Здравствуйте, дорогие друзья, и коллеги!

В данной статье я расскажу как можно добавить на сайт CSS-анимацию появления для отдельных элементов. Данный способ подойдёт для сайтов работающих на разных CMS или же вовсе без них.

Если ваш сайт работает на Wordperss и вы хотите воспользоваться готовым плагином для подключения и настройки CSS-анимации появления, то вам пригодится эта статья:

Простой способ добавить CSS анимацию на сайт

Для создания CSS-анимации нам понадобится подключить к сайту библиотеку Animate.css и скрипт WOW.js

Пошаговая инструкция по подключению CSS-анимации появления

  1. 1.Скачиваем файлы к себе на компьютер
  2. 2.Загружаем на хостинг файлы animate.css и wow.min.js в соответствующие папки.
    Если Ваш сайт работает на CMS то вам нужно загружать эти файлы в папку с активной темой или шаблоном.

    Желательно чтобы все файлы CSS у вас находили в отдельной папке «CSS», а файлы скриптов в папке «js». Поэтому если таких папок у вас нет – создайте их и загрузите в них эти 2 файла, воспользовавшись FTP клиентом или менеджером файлов в панели управления хостингом.

    Загрузка файлов на хостинг
  3. 3.Подключаем загруженные файлы в разделе заголовка страницы перед закрытием тега </head>.
    Для сайта, работающего на WordPress этот фрагмент кода должен находиться в файле header.php активированной темы.
  4. 4.Для подключения файла animate.css используем код:

    В атрибуте href должен быть указан полный путь к файлу animate.css.

    Более подробно о том как подключить css-файл к html или php странице написано в этой статье

    Для WordPress существует специальная функция get_template_directory_uri(); которая позволяет определить путь к файлу с темой. В результате подключение CSS-файла будет выглядеть так:

  5. 5.Для подключения файла wow.min.js воспользуемся кодом:

    Здесь в атрибуте src так же должен быть указан путь к файлу wow.min.js на вашем сайте.

    Для Wordpres сайта это будет выглядеть так:

  6. 6.Инициализируем скрипт. Для этого перед закрытием тега </body> добавляем следующий фрагмент кода:
  7. 7.Сохраняем внесённые изменения.

Теперь, когда библиотека Animate.css и скрипт WOW.js подключены можно добавить анимацию появления на сайте.

Добавление CSS-анимации появления для определённых элементов

  1. 1.Переходим на страницу предпросмотра Animate.css и выбираем подходящий эффект анимации
    Просмотреть анимации
  2. 2.Копируем название понравившегося эффекта.
    Вот полный перечень всех названий, который вы можете использовать:

    • bounce
    • flash
    • pulse
    • swing
    • tada
    • rubberBand
    • shake
    • headShake
    • wobble
    • jello
    • flipInX
    • flipInY
    • flipOutX
    • flipOutY
    • fadeIn
    • fadeInDown
    • fadeInDownBig
    • fadeInLeft
    • fadeInLeftBig
    • fadeInRight
    • fadeInRightBig
    • fadeInUp
    • fadeInUpBig
    • fadeOut
    • fadeOutDown
    • fadeOutDownBig
    • fadeOutLeft
    • fadeOutLeftBig
    • fadeOutRight
    • fadeOutRightBig
    • fadeOutUp
    • fadeOutUpBig
    • lightSpeedIn
    • lightSpeedOut
    • rollIn
    • rollOut
    • rotateIn
    • rotateInDownLeft
    • rotateInDownRight
    • rotateInUpLeft
    • rotateInUpRight
    • rotateOut
    • rotateOutDownLeft
    • rotateOutDownRight
    • rotateOutUpLeft
    • rotateOutUpRight
    • hinge
    • jackInTheBox
    • zoomIn
    • zoomInDown
    • zoomInLeft
    • zoomInRight
    • zoomInUp
    • zoomOut
    • zoomOutDown
    • zoomOutLeft
    • zoomOutRight
    • zoomOutUp
    • bounceIn
    • bounceInDown
    • bounceInLeft
    • bounceInRight
    • bounceInUp
    • bounceOut
    • bounceOutDown
    • bounceOutLeft
    • bounceOutRight
    • bounceOutUp
    • slideInDown
    • slideInLeft
    • slideInRight
    • slideInUp
    • slideOutDown
    • slideOutLeft
    • slideOutRight
    • slideOutUp
  3. 3.Далее для того чтобы нужный нам эффект анимации применился нам достаточно добавить ему класс с названием того эффекта, который мы выбрали + класс «wow» и класс «animated».
    Например:

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

    Так же можно присвоить нужные классы для определённых элементов на сайте при помощи скрипта:

Данный скрипт добавляет классы «wow animated fadeInUp» для всех тегов <p>, находящихся внутри тега с классом «entry-content».

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

Дополнительные настройки

Для задания времени анимации вам необходимо перед закрытием тега </body> добавить следующий код:

Где вместо ‘2.5s’ мы можем указать своё значение в секундах и таким образом сделать анимацию более быстрой или более плавной.

Для задания задержки анимации используем атрибут data-wow-delay

Вместо ‘1.5s’ указываем своё значение в секундах.

Задать количество повторов анимации можно при помощи атрибута data-wow-iteration

Значение «infinite» позволяет повторять анимацию бесконечно, так же вместо него вы можете указать определённое количество повторов.

Атрибут data-wow-offset позволяет включать анимацию, когда элемент проходит определённое количество пикселей или процентов от низа экрана.

Добавляется он аналогичным образом при помощи скрипта:

Так же вы можете задавать все эти атрибуты непосредственно в коде элемента:

Как видите ни в подключении, ни в настройке данной библиотеки и скрипта нет ничего сложного! Поэтому смело используйте данный способ настройки CSS-анимации на своём сайте. Это позволит вам добавить красивую анимацию появления для любого элемента на сайте и при этом вам не нужно будет устанавливать для этого отдельный плагин или модуль.

Видеоинструкция

Успехов вам и вашим проектам! Оставляйте свои комментарии, подписывайтесь на мою рассылку и делитесь статьёй в соцсетях если она вам помогла!
До скорых встреч в следующих статьях!

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

4 комментария

  1. <!doctype html>
    <html>
    <head>
    <meta charset=»utf-8″>
    <title>CSS Animation</title>
    <link rel=»stylesheet» href=»/css/animate.css»>
    <script type=»text/javascript» src=»/js/wow.min.js»></script>
    </head>
    <body>

    <div class=»wow slideInLeft» data-wow-duration=»2.5s» data-wow-delay=»1.5s» data-wow-offset=»40″ data-wow-iteration=»2″>
    Для этого блока применится CSS-анимация появления
    </div>

    <script>
    jQuery(document).ready(function($) {
    new WOW().init();
    });
    </script>
    </body>
    </html>

    Привет! :)
    Этот вариант не работает. Что тут не так? Спасибо!

    • Прежде всего проверьте правильность путей к скрипту и css файлу. Попробуйте использовать абсолютные пути, начинающиеся с http://, предварительно убедившись что файлы по этому пути открываются

  2. Здравствуйте. Анимация срабатывает сразу при загрузке страницы. А как сделать, чтобы анимация запускалась только тогда, когда до нее докрутят? Иначе, если анимация внизу страницы, то ее никто не увидит.

  3. Уже разобрался. Забыл просто прописать библиотеку jQuery

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif