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

Мне бы очень хотелось, чтобы некоторые вещи анимировались на экране, когда я прокручиваю их вниз, как здесь...

https://michalsnik.github.io/aos/

Проблема в том, что мой сайт на самом деле вложен в div под названием «основной контент» с отдельными div для боковой панели и верхней панели.

Из этот вопрос и ответ может показаться, что невозможно достичь того, что я хочу внутри вложенный скроллер, но это было 3 года назад, и мне просто интересно, есть ли потенциальное обходное решение с использованием aos или wow.js или чего-то подобного.

Я попробовал пару, и мне не повезло, но я чувствую, что должен быть способ добиться этого.

Заранее спасибо!


javascript html css animate.css animate-on-scroll
person bboybeatle    schedule 28.02.2019    source источник
comment
Эти библиотеки анимируют, когда окно прокручивается, и используют информацию о позиции прокрутки окна для анимации. Существует возможный обходной путь, который вы могли бы использовать. Если вы поместили контент, который хотите прокручивать, в iframe, вы можете поместить этот iframe во вложенный div.   -  person richbai90    schedule 01.03.2019
comment
:( Это ответ, который я надеялся не получить. Интересно, есть ли способ установить его из окна в div, или, может быть, это не работает так. Спасибо   -  person bboybeatle    schedule 01.03.2019

Ответы (1)


arrow_upward
0
arrow_downward

IntersectionObserver позволяет легко реализовать это поведение с помощью vanilla JavaScript. Это достаточно новый API, но есть polyfill.

Если вы хотите отслеживать свой собственный контейнер прокрутки вместо документа, вы можете установить root на что-то другое.

// Find the item we want to animate on scroll
var target = document.querySelector('#target');
var targetActiveClass = 'target-is-active';

// Call this function when it enters/leaves the viewport
var callback = function(entries, observer) { 
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add(targetActiveClass);
    } else {
      entry.target.classList.remove(targetActiveClass);
    }
  });
};

// Create our observer
var observer = new IntersectionObserver(callback, {threshold: 0});
observer.observe(target);
/* Our target, hidden by default */

#target {
  align-items: center;
  background-color: #000;
  color: #fff;
  display: flex;
  justify-content: center;
  height: 100px;
  margin-bottom: 150vh;
  margin-top: 150vh;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity .25s ease-in-out,
              transform .25s ease-in-out;
  width: 200px;
}

/* Apply this class when #target enters/leaves the viewport */

#target.target-is-active {
  opacity: 1;
  transform: none;
}
<p>Scroll!</p>
<div id="target">Howdy!</div>

person jaasum    schedule 01.03.2019