<MyRusakov.ru />

Создание приложений для Android с нуля

Создание приложений для Android с нуля

Данный курс научит Вас создавать приложения любой сложности для Android. Курс состоит из 16-ти разделов, из которых Вы узнаете, как создавать свои собственные приложения для Android.

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

Просмотрев данный курс и выполнив упражнения из него, Вы сможете создавать приложения любой сложности для самой популярной мобильной ОС в мире - Android.

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

Подписавшись по 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):

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