CSS animation - vertical marquee with images - fade to a new background color each time a specific image becomes visible

Question

I have a vertical marquee with static content inside. I am trying to achieve what is outlined in the JavaScript comments below - fade to a new background color depending on which image just entered into the view.

Pen here: https://codepen.io/TraeRegan/pen/mdbKRXY

I've tried an assortment of jQuery plugins geared towards user scrolling triggered animations as certain elements enter the viewport, but I can't get them to detect the CSS animated elements as they become visible.

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

Have a look at this other question: https://stackoverflow.com/questions/487073/how-to-check-if-element-is-visible-after-scrolling And also, consider to define the background color in the css code, and only use javascript to change the class of the container. — Adriano, Sep 13 '19 at 05:13

score 1 · Accepted Answer · answered Sep 13 '19 at 06:42

You have to assign box background color in img tag with data attribute. So, we can get value of background color when Image hits expected position in the box.

$(function() {
 var boxTop = $('.container').offset().top + ($('.container').innerHeight()/2);
 setInterval(function(){
   // console.clear();
  $('.marquee img').each(function(index, el) {
   var imgTop = $(this).offset().top + ($(this).innerHeight()/2);
   var boxBg = $(this).attr('data-bgcolor');
   // console.log(boxTop, imgTop, imgId);
   if(imgTop <= boxTop){
    $('.container').css('background-color', boxBg);
   }
  });
 }, 100);
});

.container {
    width: 640px;
    height: 480px;
    margin: 0 auto;
    overflow: hidden;
    background: white;
    position: relative;
    box-sizing: border-box;
    background-color: #317a5c;
    transition: all 0.5s ease-in-out;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="marquee">
    <img src="https://dummyimage.com/320x240/000/fff.gif&text=image 1" id="image1" data-bgcolor="#317a5c">
    <p>This is some text about image 1.</p>
    
    <img src="https://dummyimage.com/320x240/000/fff.gif&text=image 2" id="image2" data-bgcolor="#dedede">
    <p>This is some text about image 2.</p>
    
    <img src="https://dummyimage.com/320x240/000/fff.gif&text=image 3" id="image3" data-bgcolor="#ff0000">
    <p>This is some text about image 3</p>
    
    <img src="https://dummyimage.com/320x240/000/fff.gif&text=image 4" id="image4" data-bgcolor="#000000">
    <p>This is some text about image 4.</p>
    
  </div>
</div>

Thank you, it's quite helpful. The background color transition in your example doesn't happen just as the next image enters into the view though. I would accept this answer when that condition is met. — Trae, Sep 13 '19 at 15:24
Set your expected Hitting position by changing `boxTop` and `imgTop` variable values. Currently background is changing when half of the IMG hits the Box middle. Img top Hits Bottom Box `boxTop = $('.container').offset().top + ($('.container').innerHeight());` Img Middle Hits Bottom Box `boxTop = $('.container').offset().top + ($('.container').innerHeight());` `imgTop = $(this).offset().top + ($(this).innerHeight()/2);` Img Bottom Hits Bottom Box `boxTop = $('.container').offset().top + ($('.container').innerHeight());` `imgTop = $(this).offset().top + ($(this).innerHeight());` — Asfan Shaikh, Sep 14 '19 at 04:49

CSS animation - vertical marquee with images - fade to a new background color each time a specific image becomes visible

1 Answers1