Как отключить wow анимацию на мобильных устройствах
Обновлено: 25.04.2024
Скрипт WOW.js для анимации элементов при прокрутке страницы вниз.
Ранее уже была заметка для добавления анимационных эффектов при прокрутке страницы c jQuery плагином ScrollMe.
Скрипт WOW.js использует библиотеку animate.css, благодаря чему имеет больше возможностей, и не требует никакие библиотеки на JavaScript
Установка:
Добавляем на сайт стили animate.css и скрипт WOW.js:
И подключаем скрипт:
Примеры:
Подскажите как отключить анимацию на мобильных устройства? Подключил animate css+wowjs все отлично работает, но при попытке отключить анимацию на мобильных - не отключается. Почитал доки - вроде все верно. Подключал после body
как именно ты определил что не отключается? проверил на мобильном или просто сжал окно в браузере?
iBird Rose, на gulp настроен external ip, через него зашел с телефона на сайт, и анимация работает, все стабильно прыграет и крутится. Может разрешение телефона слишком больше? и брейкпоинты не срабатывают внутри самого wow js?
11 thoughts on “ WOW.js — анимация элементов при прокрутке страницы ”
Добрый день! Подскажите пожалуйста как отключить анимацию для мобильных и планшетов.
Добрый день, Юрий!
Должно помочь указание параметра mobile: false.
var wow = new WOW(
Лучше самому сделать анимацию
Не могу найти как можно изменить промежуток времени между повторением анимации.
Есть одна проблема. Когда страница загружается, то анимированные элементы сначала на мгновение просто появляются на экране, а потом еще раз появляются уже с анимацией. Как сделать чтоб они появлялись первый раз уже с анимацией? Подскажите если не сложно.
почему то не хватает стиля:
.wow visibility: hidden;
>
он скрывает до отыгрывания анимации
добавьте в стили, это решит проблему
Почему-то скрипт wow проигрывает всю анимацию сразу, а не при скроллинге, в чём может быть дело?
Решил вопрос дописав
Здравствуйте. У меня на сайте версия этого плагина самая последняя. JQuery 3.2.1
Возникла проблема: при инициализации страницы плагин добавляет класс wow, добавляет стили с animation-name: none
При скроле после появления на экране добавляется класc animated и прописываются стили animation-name: fadeInLeft; и animation-duration: 0.6s; После чего удаляется класс animated.
Проблема в том что, анимирование может начаться сразу после добавления класса animated и стилей, а может пройти около 20сек. до начала.
У класса animated прописал свойства -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s;animation-delay: 0s; Но не помогло.
Расширенная настройка
boxClass : 'wow' , // класс, скрывающий элемент до момента отображения на экране (по умолчанию, wow) animateClass : 'animated' , // класс для анимации элемента (по умолчанию, animated) offset : 0 , // расстояние в пикселях от нижнего края браузера до верхней границы элемента, необходимое для начала анимации (по умолчанию, 0) mobile : true , // включение/отключение WOW.js на мобильных устройствах (по умолчанию, включено) live : true , // поддержка асинхронно загруженных элементов (по умолчанию, включена) // функция срабатывает каждый раз при старте анимации // аргумент box — элемент, для которого была запущена анимация scrollContainer : null // селектор прокручивающегося контейнера (опционально, по умолчанию, window)Стоит ли на сегодняшний день всё ещё отключать анимацию в мобильной версии сайта?
Например, красиво всплывающий текст кнопки, нужен только для понтов дизайнера и чтобы сайт выглядел "дорого-богато". Если это ваша цель -- тогда ок. Но в других случаях это нахуй пользователю не нужно.
Другой пример: анимация превращения условной стрелочки у крестик. Тут анимация нужна чтобы привлечь внимание пользователя к изменениям в интерфейсе. И эта анимация нужна на любом устройстве.
Думаю стоит, все еще остаются бабки у которых супер телефоны, которые облапаны жиром, 10.000 уведомления и 500.000 вкладок.
Так же взрослые люди - для которых анимация не очень то и важна, зашел - увидел информацию и все, закрыл.
Как отключить JS файл на мобильной версии?
Как сделать так, что бы на мобильной версии этот скрипт просто не подключался?
- Вопрос задан более трёх лет назад
- 1502 просмотра
Скрипты подключаются тегом script, в атрибут src записывается путь к скрипту.
"Как отключить JS файл на мобильной версии?"
Через html - никак.
Если вы подразумеваете адаптивность.
То можно подключать файл исходя из того мобильное устройство это или нет.
Данная функция на чистом js может помочь в определении
Дополнительные настройки:
data-wow-duration : Продолжительность анимации
data-wow-delay : Задержка перед запуском анимации
data-wow-offset : Расстояние от нижнего края браузера для запуска анимации
data-wow-iteration : Количество повторов анимации
Пример:
<section class = "wow slideInLeft" data-wow-duration = "2s" data-wow-delay = "5s" > <section class = "wow slideInRight" data-wow-offset = "10" data-wow-iteration = "10" >Использование
Перед использованием нужно активировать WOW.js.
Дальнейшее управление анимацией осуществляется добавлением классов и data-атрибутов.
< section class = "wow slideInLeft" data - wow - duration = "2s" data - wow - delay = "5s" data - wow - offset = "10" data - wow - iteration = "10" >wow — стандартный класс WOW.js, скрывающий элемент до момента отображения на экране;
slideInLeft — один из эффектов библиотеки Animate.css (более подробно — в документации);
data-wow-duration — изменяет время анимации;
data-wow-delay — задержка перед запуском анимации;
data-wow-offset — расстояние в пикселях от нижнего края браузера до верхней границы элемента необходимое для начала анимации;
data-wow-iteration — количество повторений анимации;
Настройка параметров:
boxClass : Имя класса, которое показывает скрытое поле при прокрутке.
animateClass : Имя класса, который запускает CSS анимацию
offset : Определяет расстояние между нижней частью окна браузера и верхней частью скрытого окна. Когда страница прокручивается и достигает этого расстояния, открывается скрытое поле и запускается анимация.
Добавление эффектов к элементам:
Класс wow сделает элемент невидимым пока до него не дойдет прокрутка, а класс bounceInUp добавит эффект появления. Посмотреть все эффекты можно на странице библиотеки animate.css
Подключение
Для работы необходимо подключить Animate.css и WOW.js.
Установка:
Добавляем на сайт стили animate.css и скрипт WOW.js:
И подключаем скрипт:
WOW.js — анимация элементов при прокрутке страницы
WOW.js позволяет отложить запуск анимации элементов до момента их отображения на экране при прокрутке страницы. Разработчик WOW.js рекомендует использовать Animate.css для анимации. Эта библиотека поддерживает более 70 эффектов.
Читайте также: