<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

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

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

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

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

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

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

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

Какая тема Вас интересует больше?

CSS анимация при прокрутке страницы

CSS анимация при прокрутке страницы

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

Демо-пример с animate.css

Покручивая длинный лендинг, пользователь просто не успевает увидеть анимацию всех секций, ведь библиотека animate.css уже быстренько отработала. Что же делать? Как заставить анимацию продолжать работать при прокрутке страницы, реагируя на новые секции с элементами.

Как гласит народная мудрость, если мало одной библиотеки, то добавь ещё одну.

Подключение плагина wow.js

Сайт: https://github.com/matthieua/WOW

Нужно сделать так, чтобы анимация срабатывала только тогда, когда мы прокручиваем страницу. Для этого и существует плагин wow.js, для работы которого не нужен jQuery. Обратите внимание, что файл animate.css, тоже должен быть подключен и классы у тегов прописаны, об этом было сказано в начале статьи.

Запомните! Animate.css и wow.js работают в паре!

Независимо от способа подключения, прописываем ссылку на JS файл перед закрывающим тегом body, в теге script. Запускает плагин функция - new WOW().init()

Подключение через CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
  new WOW().init();
</script>

Подключение через скачивание архива

Скачиваете архив с github и перекладываете файл wow.min.js из скачанной архивной папки dist папку js с вашим проектом.

<script src="js/wow.min.js"></script>
<script>
  new WOW().init();
</script>

Чтобы анимация на сайте сработала, необходимо добавить к тегам элементов, которые собираетесь анимировать - класс wow, вместо класса animated. Замена классов касается тех, кто на сайте использовал только одну библиотеку animate.css, но решил добавить ещё плагин wow.js. Если вы сразу установили оба файла, то просто прописываете wow и название анимации.

Было так:
<div id="item" class="animated pulse">
А стало так:
<div id="item" class="wow pulse">

Теперь анимация запускается при прокрутке страницы, по ходу движения вниз, по мере появления новых элементов на странице.

Дополнительные опции

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

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

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

<h1 class="wow fadeInDown" data-wow-duration="1s">How it works</h1>

Демо-пример с animate.css+wow.js

Где на практике лучше всего применять комбинацию animate.css + wow.js? Там, где вы активно продвигаете товар или услугу, такая подача информации привлечет больше клиентов. Самый главный потребитель анимаций при прокручивании страницы – это лендинг. Есть одно но, прежде чем повесить на него анимацию, надо сперва научиться профессионально создавать лендинги, хотя бы из этого видеокурса "Создание и продвижение лендинга под ключ".Обратите внимание, как привлекательно анимирована сама продающая страница видео-курса.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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