CSS 动画 - 带有图像的垂直选取框 - 每次特定图像可见时淡入新的背景颜色

Question

我有一个带有静态内容的垂直选框。我正在尝试实现下面 JavaScript 注释中概述的内容 - 根据刚刚进入视图的图像淡入新的背景颜色。

笔在这里：https : //codepen.io/TraeRegan/pen/mdbKRXY

我尝试了各种各样的 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>

CSS

.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%);

  }

}