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 для нужного элемента.
Подборка бесплатных IT-курсов и вебинаров от Skillbox.
Бесплатные IT-курсы, нужно только пройти онлайн-тест здесь
Бесплатные вебинары здесь
<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 указать знак Читать далее
MixItUp - это высокопроизводительная библиотека без зависимостей, для анимированных манипуляций с DOM, которая дает вам возможность фильтровать, сортировать, добавлять и удалять элементы DOM с красивой анимацией. MixItUp прекрасно сочетается с вашими существующими HTML и CSS, что делает её отличным выбором Читать далее
В этом уроке вы узнаете, как создать иллюзию трехмерной фотографии из изображения, используя JavaScript и библиотеку Pixi.js webGL. Давайте сделаем это! Концепция Чтобы превратить обычную фотографию в 3D, нам нужно использовать карту глубины (или некоторые назвали бы карту смещения или Читать далее
Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ - это определить Читать далее
Создать карту в конструкторе Яндекс карт наверное самый простой и быстрый способ, когда надо добавить местоположение на сайте. Но если нужно сделать карту с внешними элементами управления, то конструктора здесь окажется мало. Самый распространенный пример, когда есть несколько офисов компании, Читать далее
jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее
В основном, модальное окно - это диалоговое или всплывающее окно, которое используется для предоставления важной информации пользователю или побуждения пользователя предпринять необходимые действия, прежде чем двигаться дальше. Модальные окна широко используются для предупреждения пользователей о таких ситуациях, как истечение времени Читать далее
Добавить комментарий