Как изменить html в анимации, которую анимирует прокрутка?

Question

<div class="avator">
    <div class="content"></div>
</div>

с моим прокруткой вниз он изменит div на:

<div class="avator">
   <img src="/image/avator.png" />
</div>

с прокруткой альфа-изменений. и если я остановлю прокрутку, изменение прекратится. как к этому?

Answer 1

допустим, у нас есть такой div в вашем примере

<div class="avator">
   <img src="/image/avator.png" />
</div>

, а затем добавим к .avator img свойство opacity: 0;
css

.avator img { opacity: 0; }

Теперь давайте вычислим значение непрозрачности на основе% прокручиваемой страницы и присвоим ему значение .avator img (я предпочитаю использовать jQuery, поэтому вот пример в jQuery)

$(window).on('scroll', function(){
  let windowScroll = $(window).scrollTop();
  let docHeight = $(document).height();
  let windowHeight = $(window).height();

  let scrollFromTop = (windowScroll / (docHeight - windowHeight))

  $('.avator img').css({
    'opacity': scrollFromTop
  })
})

это обновит непрозрачность .avator img каждый раз, когда пользователь будет использовать прокрутку
из c, вы можете заменить img на div и заставить div выглядеть так