Анимация плавного появления при скролле

Question

Анимация плавного появления при скролле

Рейтинг: -4Ответов: 1Опубликовано: 24.05.2023

Как сделать такую анимацию чтобы при скролле вниз она плавно появлялась, а при скролле верх она плавно исчезала. Пример:

css javascript html css-animation анимация

Источник: Stack Overflow на русском

Answer 1

▲ 1

(function () {
  var square = document.querySelector('.square-wrapper');

  var observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      var entrySquare = entry.target.querySelector('.square');
      if (typeof getCurrentAnimationPreference === 'function' && !getCurrentAnimationPreference()) {
        return;
      }

      if (entry.isIntersecting) {
        entrySquare.classList.add('square-animation');
        return;
      }

      entrySquare.classList.remove('square-animation');
    });
  });

  observer.observe(square);
})();

.square-wrapper {
  border: 2px dashed #373737;
  width: 200px;
  height: 200px;
}
.square {
  width: 200px;
  height: 200px;
  background: #e62a52;
  border-radius: 8px;
}
.square-animation {
  animation: wipe-enter 2s 1
}
@keyframes wipe-enter {
  0% {
    transform: scale(0, .025)
  }
  50% {
    transform: scale(1, .025)
  }
}

.wrap {
  display: flex;
}
.stage {
  position: relative;
  height: 250px;
  margin-top: 110vh;
}
.stage, .stage-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage-footer {
  margin: 10px
}

<p>Прокрутите вниз.</p>
<div class="stage">
  <div class="wrap">
    <div class="square-wrapper">
      <div class="square"></div>
    </div>
  </div>
</div>
<div class="stage-footer">
  CSS-класс .square-animation здесь добавляется каждый раз при появлении элемента.
  Используйте прокрутку вниз и вверх.
</div>

Анимация плавного появления при скролле

Ответы