<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру 3.0

PHP и MySQL с Нуля до Гуру 3.0

Данный курс научит Вас программировать на самом популярном Web-языке в мире - PHP. Курс состоит из 9 разделов, в которых с нуля рассказывается и показывается процесс написания различных скриптов на PHP.

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

В Бонусе «Создание сайта для библиотеки» Вы увидите применение знаний из основного курса при создании полноценного проекта.

Просмотрев данный курс, Вы сможете создавать абсолютно любые PHP-сайты любой сложности.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Анимация при скролле на WordPress

Анимация при скролле на WordPress

На прошлом уроке, мы научились делать CSS анимацию элементов, используя библиотеки animate.css + wow.js. На этом уроке мы научимся как сделать тоже самое, но только на WordPress, как с плагином, так и без плагина.

Анимация при скролле без плагина

Сайт: https://github.com/matthieua/WOW
https://daneden.github.io/animate.css/

Как добавить в тему WordPress animate.css и wow.js и в дальнейшем применять их для анимирования элементов сайта?

  1. Скачайте обе библиотеки
  2. Создайте две папки: css и js
  3. Положите в них animate.min.css и wow.min.js соответственно
  4. Закачайте эти папки с файлами в вашу текущую тему на хостинге

Добавьте следующие строчки в functions.php, такой способ подключения считается безопасным, новые стили и скрипты регистрируются и ставятся в очередь. Вместо префикса twentyseventeen, вы пишите название вашей темы.

Регистрация и подключение animate.css и wow.js, используя событие wp_enqueue_scripts + Активация wow.js

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

<link rel='stylesheet' id='animate-css' href='http://www.your-site.com/wp-content/themes/twentyseventeen/css/animate.min.css?ver=4.9.7' type='text/css' media='all' />

Ссылка на JS скрипт выведется внизу страницы.

<script type='text/javascript' src='http://www.your-site.com/wp-content/themes/twentyseventeen/js/wow.min.js?ver=4.9.7'></script>

Самая сложная часть процесса сделана - стили и скрипты подключены, пора заняться самой анимацией. На сайте https://daneden.github.io/animate.css есть примеры всех анимаций, выбираете класс и прописываете название класса вместе с wow, к любому блочному элементу на сайте.

<div class="wow bounceInUp">Здесь ваш текст, картинка, видео..</div>

После всех выполненных шагов, анимация при скролле страницы на WordPress, будет 100% работать, проверено на личном опыте.

Плагин анимации для WordPress – Animate it

Сайт: https://ru.wordpress.org/plugins/animate-it

С помощью плагина Animate It можно делать такие же анимации, как и без него, который работает на тех же библиотеках. Только не надо ничего подключать в functions.php, а просто скачать и активировать.

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

Документация: https://www.downloads.eleopard.in/animate-it-documentation-wordpress/

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

Генератор: https://www.downloads.eleopard.in/class-generator-wordpress/

Одним словом, работать с Animate It легко и приятно. Но, не спешите, после прочтения статьи, идти по более легкому пути. В один прекрасный день, разработчик может бросить своё детище, перестать поддерживать, сделать плагин платным или вообще удалить. А при такой перспективе, осилить подключение библиотек правильным и безопасным способом, кажется более надежным способом. Тогда, вашей анимации ничего не угрожает, она будет работать всегда.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.