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

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

0 голосов
/ 01 марта 2019

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

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

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

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

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

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

1 Ответ

0 голосов
/ 01 марта 2019

IntersectionObserver позволяет легко реализовать это поведение, используя ванильный 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>
...