@ArtJH

Как сделать такую анимацию?

Вот сайт. Анимация появление продуктов. Когда скролишь вниз, товар появляется снизу вверх, а когда скролишь вверх, то товар сверху вниз.

Мои варианты:

1) У активного товара есть класс "active". Попробовать отслеживать его соседние элементы(prev и next). Потом задавать css свойства transform. prev transform: translateY(200%), next transform: translateY(-200%) , active transform: translateY(0%)
Вот только не знаю как сделать это отслеживание смены класса active.
  • Вопрос задан
  • 196 просмотров
Решения вопроса 2
sniggering_deus
@sniggering_deus Куратор тега CSS
Dance Gavin Dance - Prisoner
Вот только не знаю как сделать это отслеживание смены класса active


Например можно с помощью Intersection Observer.

Код примерно такой:

<section class="cont">

  <div class="section">
    <img class="element" src="" alt="">
  </div>

  <div class="section">
    <img class="element" src="" alt="">
  </div>

  <div class="section">
    <img class="element" src="" alt="">
  </div>

  <div class="section">
    <img class="element" src="" alt="">
  </div>

</section>


.section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.element {
/* какие-нибудь стили */
}

.active {
/*  делаете что-то с активным элементом */
}


const features = document.querySelectorAll(".element");

observer = new IntersectionObserver(
  (sections) => {
    sections.forEach((section) => {
 
      if (section.intersectionRatio > 0.4) {
        section.target.classList.add("active");
      } else {
        section.target.classList.remove("active");
      }
    });
  },
  { threshold: 0.4 }
);

features.forEach((feature) => observer.observe(feature));
Ответ написан
RAX7
@RAX7
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы