Описание тега animate-on-scroll

0 ответов

Aos с ползунком swiper на экране с меньшими затратами

Я использовал AOS libray и swiper slider для создания анимационных эффектов на слайдере для текста. Это прекрасно работает, но я вижу, что есть проблема, когда высота экрана слишком мала ниже 500 пикселей. Ну, это полностью зависит от того, какой ко…
1 ответ

Использование AOS (анимация при прокрутке) внутри div с переполнением

Мне бы очень хотелось, чтобы некоторые вещи анимировались на экране, когда я прокручивал до них, как они делают здесь... https://michalsnik.github.io/aos/ Проблема в том, что мой сайт на самом деле вложен в div, называемый main-content, с отдельными…
5 ответов

Как сделать так, чтобы AOS не работал со слайдером Slick?

Я использую AOS, чтобы показать элементы HTML на прокрутке. Это работает хорошо само по себе, но когда я использую его на страницах, которые содержат слайдер Slick, элементы, к которым применяется AOS, не отображаются. Элементы скрыты, и если имеетс…
09 авг '18 в 13:38
1 ответ

Использование библиотеки AOS с Vue

Я использую библиотеку AOS (Animate on scroll) с vue. AOS предоставляет пользовательское событие JS: document.addEventListener('aos:in', ({ detail }) => { console.log('animated in', detail); }); Я хотел бы запустить функцию, когда это событие про…
14 ноя '18 в 17:58
0 ответов

AOS добавляет пробел в правой части страницы, вызывая проблемы с отзывчивостью

Почему AOS fade-left и fade-right добавляет пробел в правой части страницы? Есть ли какое-то решение для этого? Я также попытался установить следующий стиль:body { overflow-x:hidden; }
07 янв '19 в 18:57
1 ответ

fullpagejs и AOS - не работают вместе

Я использую fullpagejs и AOS, чтобы некоторые элементы div появлялись в нижней части страницы при прокрутке (или, по крайней мере, это то, чего я хотел бы достичь). К сожалению, это не работает. Да, я прочитал раздел часто задаваемых вопросов и да, …
1 ответ

Внедрение AOS в WordPress делает целевые элементы пустыми, а не постепенными

Я пытаюсь внедрить плагин Михалсника Animate On Scroll в мой WordPress-сайт. Но когда я делаю следующий div с "data-aos", как указано, элемент оказывается пустым, а не исчезает. <div class="textbox center branch-bg" data-aos="fade" data-aos-durat…
18 фев '18 в 13:51
2 ответа

Navbar гаснет, когда я добавляю анимацию при прокрутке

Я пытаюсь реализовать анимацию прокрутки на моем сайте здесь с помощью AOS HTML <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/ao…
31 май '19 в 13:45
0 ответов

Получить элемент, вызвавший пользовательское событие AOS

У меня есть несколько элементов, которые вызывают пользовательское событие, когда они находятся в режиме просмотра (вошли в область просмотра) с помощью последней библиотеки Animate On Scroll ( https://github.com/michalsnik/aos). https://codepen.io/…
05 апр '19 в 08:24
1 ответ

Почему один и тот же объект может возвращать разные экземпляры в разных браузерах?

Я использую плагин AOS, и он передает объект на пользовательское событие. Объект выглядит так: [object Object]: {detail: Object} detail: Object accessKey: "" align: "" attributes: Object baseURI: "http://localhost:3000/docs/countup.html" childElemen…
05 апр '19 в 10:14
0 ответов

Как исправить непрозрачность 0 и трансформировать на мобильном с aos.js?

Я использую AOS.js для анимации при прокрутке в NUXT. AOS отключил анимацию на мобильном устройстве, но некоторые блоки в v-for загружаются с 0 непрозрачностью и преобразуются. Эти блоки имеют пользовательские CSS-всплывающие переходы. Я пытаюсь исп…
16 апр '19 в 08:01
1 ответ

Почему не работает анимация при прокрутке в розетке маршрутизатора и как это исправить?

Я пытаюсь заставить анимацию при прокрутке работать в интерфейсе angular7, однако она не работает в маршрутизаторе. Я предполагаю, что это связано с тем, как угловые управляют положением прокрутки внутри выходов маршрутизатора, как было предложено в…
05 май '19 в 12:58
0 ответов

Библиотека AOS (анимация при прокрутке) не работает при выборе элементов для анимации с помощью jQuery

Я пытаюсь анимировать элементы H1 для многих страниц с помощью AOS (анимация при прокрутке). У меня есть несколько страниц, которые используют заголовок, поэтому я выбираю все заголовки с помощью jQuery. Если я вписываю атрибуты вручную в каждом заг…
0 ответов

Как установить высоту родительского div на высоту только одного (из нескольких) дочерних элементов

На домашней странице моего сайта я использую библиотеку анимации при прокрутке, чтобы показать различные части страницы при прокрутке вниз. Я хочу, чтобы родительский div изначально имел высоту первого дочернего div (.intro). При прокрутке вниз высо…
17 июн '19 в 23:37
0 ответов

Animate on Scroll тормозит мою первую содержательную краску?

Скорость страницы моего сайта Wordpress составляет ничтожные 1,3 с до первой содержательной краски и 1,8 с до первой значимой краски. Я работал над технологиями оптимизации, такими как сжатие тысяч изображений и ленивая загрузка (что не очень помогл…
31 июл '19 в 00:04
1 ответ

О проблеме с анимацией прокрутки на маленьких экранах с использованием Vanilla JS

Я создал анимацию для своего веб-сайта, чтобы изменить определенный элемент (например, цвет фона) при прокрутке с использованием Vanilla JS. Для этого я использовалwindow.onscroll свойство, и я запускаю анимацию, когда window.scrollY достигает опред…
04 сен '19 в 19:19
0 ответов

Библиотека AOS не работает, за исключением обновления

Я создаю веб-сайт, на котором div должен скользить слева направо, когда он прокручивается в поле зрения. Я использую библиотеку AOS для его анимации, но она не работает, пока я не прокручу элемент в поле зрения, а затем обновлю вкладку. Вот моя HTML…
14 ноя '19 в 20:54
0 ответов

AOS(анимация при прокрутке) не работает в полноэкранном режиме

У меня есть сайт, на котором я добавил AOS анимация. <div class="row-div"> <div class="inner-row-div" data-aos="fade-up" data-aos-duration="1200" data-aos-easing="ease-in-out"> <div class="teams" style="background-image: url('assets/i…
13 янв '20 в 10:18
1 ответ

Используйте AOS.js с классом вместо атрибута данных

Я хочу использовать AOS.js на своем сайте, но у меня нет возможности добавить необходимые атрибуты данных в DIV страницы. Вот разметка из документации ( https://michalsnik.github.io/aos/): <div data-aos="fade-up" data-aos-duration="3000"> ... …
01 фев '20 в 15:07
1 ответ

Элементы AOS (анимация при прокрутке), невидимые на статическом сайте

Я делаю сайт для клиента и пытаюсь реализовать библиотеку AOS, чтобы он выглядел более динамично. Я выполнил инструкции из GitHub: добавить в <head> <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> Добавить перед …
05 июн '20 в 19:19