Плавная смена фона при пролистывании

Видеоинструкция: https://youtu.be/eqb6Wm7gMZs

Пример: https://besttaplink.ru/p/ba2698/

Анимации появления: https://teletype.in/@onthewaytothesun/w5ecZluwxS4

Добавление класса для секции

  entry.target.closest('.blocks-section').classList.add('viewed')

<div class="animate-bck"></div>

Код с примера:

<script>Array.from(document.querySelectorAll('.animate-bck')).map((e) => {
  e.closest('.blocks-section').classList.add('cat-back')
  })</script>
<style>
.cat-back {position:relative;}
  .cat-back>div {position:relative;z-index:3;}
.cat-back::before {
content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background: url(https://taplink.st/p/1/a/3/5/51947211.jpg?0) no-repeat center / cover;
  transition:3s;
  z-index:1;
}
.cat-back::after {
content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background: url(https://taplink.st/p/e/2/0/3/51947370.jpg?0) no-repeat center / cover;
  transition:3s;
  z-index:2;
  clip-path: ellipse(0px 0px at 0% 0%);
}
.cat-back.viewed::after {
clip-path: ellipse(150% 150% at 0% 00%);
}

</style>

Вы можете поменять скорость воспроизведения анимации, поменяв время в этой строчке

transition:3s;

3s это 3 секунды