Javascript CSS动画-带有图像的垂直选框-每次特定图像可见时都会褪色为新的背景色

我有一个内有静态内容的垂直字幕。我正在尝试实现下面JavaScript注释中概述的效果——根据刚刚进入视图的图像，淡入新的背景色

笔在这里：

我尝试了一系列jQuery插件，这些插件面向用户在某些元素进入视口时滚动触发的动画，但我无法让它们在CSS动画元素可见时检测它们

JavaScript

$(function() {
  var image1_bg_color = '#317a5c';
  var image2_bg_color = '#dedede';
  var image3_bg_color = '#ff0000';
  var image4_bg_color = '#000000';

// pseudo-code...

// When #image2 becomes visible fade .container bg color from image1_bg_color to image2_bg_color

// When #image3 becomes visible fade .container bg color from image2_bg_color to image3_bg_color

// When #image4 becomes visible fade .container bg color from image3_bg_color to image4_bg_color

// When #image1 re-enters view fade .container bg color from image4_bg_color to image1_bg_color

// etc.
});

HTML

<div class="container">
  <div class="marquee">
    <img src="https://dummyimage.com/320x240/000/fff.gif&text=1" id="image1">
    <p>This is some text about image 1.</p>

    <img src="https://dummyimage.com/320x240/000/fff.gif&text=2" id="image2">
    <p>This is some text about image 2.</p>

    <img src="https://dummyimage.com/320x240/000/fff.gif&text=3" id="image3">
    <p>This is some text about image 3</p>

    <img src="https://dummyimage.com/320x240/000/fff.gif&text=4" id="image4">
    <p>This is some text about image 4.</p>

  </div>
</div>

---

您必须在

img

标记中使用

data

属性指定框背景色。所以，当图像到达框中的预期位置时，我们可以得到背景色的值

$（函数（）{
var boxTop=$（'.container'）.offset（）.top+（$（'.container'）.innerHeight（）/2）；
setInterval（函数（）{
//console.clear（）；
$（'.marquee img'）。每个（函数（索引，el）{
var imgTop=$（this.offset（）.top+（$（this.innerHeight（）/2）；
var-boxBg=$（this.attr（'data-bgcolor'）；
//控制台日志（boxTop、imgTop、imgId）；
如果（IMGToT查看了另一个问题：并且，考虑在CSS代码中定义背景颜色，并且只使用JavaScript来更改容器的类。谢谢，这非常有帮助。示例中的背景颜色转换不会像下一个图像进入视图那样发生。我会接受这个答案WHE。n该条件已满足。通过更改
boxTop
和
imgTop
变量值来设置预期的命中位置。当前，当一半IMG击中方框中间时，背景正在改变。IMG top击中底部方框
boxTop=$（'.container'）.offset（）.top+（$（'.container'）.innerHeight（））
Img Middle点击底部框
boxTop=$（'.container'）.offset（）.top+（$（'.container'）.innerHeight（））；
imgTop=$（this.offset（）.top+）（$）.offset（）.top+（$（'.container'）.innerHeight（））；
imgTop=$（this.offset（）.top+）.top+($（此）.innerHeight（））；
.container {
    width: 640px;
    height: 480px;
    margin: 0 auto;
    overflow: hidden;
    background: white;
    position: relative;
    box-sizing: border-box;
    background-color: #317a5c;
}

.marquee {
    width: 320px;
    top: 480px;
    position: relative;
    box-sizing: border-box;
    animation: marquee 30s linear infinite;
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
}

@keyframes marquee {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-150%);
  }
}