如何更改通过滚动设置动画的动画中的html

Question

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

当我滚动到底部时，它会将div更改为：

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

随着滚动，alpha发生变化。如果我停止滚动，更改将停止。怎么去呢？

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的不透明度
Ofc您可以将img替换为div，并使div看起来像