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();
Сегодня я расскажу как можно легко и совершенно бесплатно создать версию для слабовидящих практически для любого сайта. Это решение подойдет и для сайтов государственных организаций, так как полностью соответствует ГОСТ. Наша версия сайта для слабовидящих будет с удобным меню и Читать далее
data-* атрибуты позволяют передавать некую скрытую информацию в элементах для её дальнейшего использования. Рассмотрим пример, когда на сайте есть список товаров и при нажатии кнопки "Купить", скрипту передавалось бы название и цена выбранного товара. <div id="157" class="product"> <div class="name">Системный блок</div> Читать далее
Возникла задача сделать прикрепление сайдбара, такое же, как в ВКонтакте. При скролле до верхней границы элемента он закрепляется, а при достижении определенного уровня останавливается и прокручивается до конца вместе со страницей. Раньше приходилось реализовывать подобное с нуля и это было Читать далее
В этой статье рассмотрим как можно вызвать печать страницы с помощью JavaScript, распечатать отдельные блоки сайта и оформить распечатываемую страницу стилями. Вызвать печать на странице Печать документа на странице можно вызвать JavaScript функцией print(). Пример: <a href="javascript:(print());" class="button-print">Печать</a> Оформление страницы Читать далее
Сегодня рассмотрим пример создания кнопки наверх с использованием библиотеки jQuery, которая появляется при скролле страницы и при нажатии на неё слистывает страницу на самый верх. Подключаем библиотеку jQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> Код HTML <div class="scroll-up"></div> Код CSS <style> .scroll-up { position:fixed; Читать далее
Данный пример подойдет всем сайтам у которых есть якорные ссылки, особенно будет актуально для лендинг пейдж. При нажатии на ссылку, которая содержит якорь, происходит плавная прокрутка к элементу. Обычно якорная ссылка содержит в атрибуте href ID элемента назначения, со знаком Читать далее
Как сделать кнопку назад на сайте? Самый простой вариант это с помощью JavaScript-функции history. С ней можно переходить вперед, назад, обновлять страницу и делать переход на две и более страницы сразу. Кнопка назад Как ссылка: <a onclick="javascript:history.back(); return false;">Назад</a> Как Читать далее
Добавить комментарий