wow.js - эффекты появления блоков при прокрутке страницы

14 февраля 2020 JavaScript

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

Использование wow.js

Официальный сайт проекта. Там же можно посмотреть примеры эффектов.

1. Скачиваем библиотеку отсюда.

2. Подключаем на сайте animate.css:

<link rel="stylesheet" href="css/animate.css">

Подключаем wow.js и вызываем:

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

3. Добавляем класс wow для нужного элемента.

<div class="wow">
	Текст
</div>

4. И добавляем класс эффекта, например bounceInUp:

<div class="wow bounceInUp">
	Текст
</div>

К элементу так же можно добавить некоторые настройки с помощью data-* атрибутов:

<div class="wow bounceInUp" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10">
	Текст
</div>

slideInLeft — один из эффектов библиотеки Animate.css (более подробно — в документации).

data-wow-duration — изменяет время анимации.

data-wow-delay — задержка перед запуском анимации.

data-wow-offset — расстояние в пикселях от нижнего края браузера до верхней границы элемента необходимое для начала анимации.

data-wow-iteration — количество повторений анимации.

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

Более расширенная настройка библиотеки:

var wow = new WOW(
  {
    boxClass: 'wow', // класс, скрывающий элемент до момента отображения на экране (по умолчанию, wow)
    animateClass: 'animated', // класс для анимации элемента (по умолчанию, animated)
    offset: 0, // расстояние в пикселях от нижнего края браузера до верхней границы элемента, необходимое для начала анимации (по умолчанию, 0)
    mobile:  true, // включение/отключение WOW.js на мобильных устройствах (по умолчанию, включено)
    live:  true, // поддержка асинхронно загруженных элементов (по умолчанию, включена)
    callback: function(box) {
      // функция срабатывает каждый раз при старте анимации
      // аргумент box — элемент, для которого была запущена анимация
    },
    scrollContainer: null // селектор прокручивающегося контейнера (опционально, по умолчанию, window)
  }
);
wow.init();

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:

Остались вопросы по статье? Задайте их прямо сейчас!

Если мы используем JavaScript, то некоторые действия по умолчанию нужно отменить. Самый распространённый случай это клик по ссылке. К примеру при нажатии должно появляться всплывающее окно, но по умолчанию браузер будет переходить по URL. Если в атрибуте href указать знак Читать далее

Фильтрация и сортировка на JS с помощью библиотеки MixItUp

MixItUp - это высокопроизводительная библиотека без зависимостей, для анимированных манипуляций с DOM, которая дает вам возможность фильтровать, сортировать, добавлять и удалять элементы DOM с красивой анимацией. MixItUp прекрасно сочетается с вашими существующими HTML и CSS, что делает её отличным выбором Читать далее

3D фотоэффект изображения на JavaScript

В этом уроке вы узнаете, как создать иллюзию трехмерной фотографии из изображения, используя JavaScript и библиотеку Pixi.js webGL. Давайте сделаем это! Концепция Чтобы превратить обычную фотографию в 3D, нам нужно использовать карту глубины (или некоторые назвали бы карту смещения или Читать далее

Автоопределение города по IP на сайте

Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ - это определить Читать далее

Яндекс карта с управлением для сайта

Создать карту в конструкторе Яндекс карт наверное самый простой и быстрый способ, когда надо добавить местоположение на сайте. Но если нужно сделать карту с внешними элементами управления, то конструктора здесь окажется мало. Самый распространенный пример, когда есть несколько офисов компании, Читать далее

Подключение jQuery

jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее

Модальное окно Bootstrap: использование и настройка

В основном, модальное окно - это диалоговое или всплывающее окно, которое используется для предоставления важной информации пользователю или побуждения пользователя предпринять необходимые действия, прежде чем двигаться дальше. Модальные окна широко используются для предупреждения пользователей о таких ситуациях, как истечение времени Читать далее

wow.js - эффекты появления блоков при прокрутке страницы

Использование wow.js

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

Поиск

Категории

Теги

Подписаться