javascript - How to display background for a specific bloc

Question

I have joined a GIF below, if you notice the last two wallpapers, they are showing almost at the same time. I'm actually looking for a bit of a time lag between the two when displaying.

Actually, it's a timeline that i copied from : https://codepen.io/knyttneve/pen/bgvmma?editors=1000, but i changed the HTML to adapt it to the project.

This is the js code:

var fn_timeline = function() {
  $.fn.timeline = function() {
    var selectors = {
      id: $(this),
      item: $(this).find(".timeline-item"),
      activeClass: "timeline-item--active",
      img: ".o-timeline__img > img"
    };
    selectors.item.eq(0).addClass(selectors.activeClass);
    selectors.id.css("background-image", "url(" + selectors.item.first().find(selectors.img).attr("src") + ")");

    var itemLength = selectors.item.length;
    $(window).scroll(function() {
      var max, min;
      var pos = $(this).scrollTop() + 300;
      selectors.item.each(function(i) {
        min = $(this).offset().top;
        max = ($(this).height() + $(this).offset().top);
        var that = $(this)
        if (i == itemLength - 2 && pos > min + $(this).height() / 2) {
          selectors.item.removeClass(selectors.activeClass);
          selectors.id.css("background-image", "url(" + selectors.item.last().find(selectors.img).attr('src') + ")");
          selectors.item.last().addClass(selectors.activeClass)
        } else if (pos <= max - 40 && pos >= min) {
            selectors.id.css("background-image", "url(" + $(this).find(selectors.img).attr('src') + ")");
            selectors.item.removeClass(selectors.activeClass);
            $(this).addClass(selectors.activeClass);
          }
      });
    });
  }
  $("#timeline-1").timeline();
}

And the HTML :

<div class="timeline-wrapper   timeline1col  ">
    <div class="timeline-container" id="timeline-1" style="background-image: url(&quot;/sites/default/files/2021-01/reunion04-desktop.jpg&quot;);">
<div class="timeline"> 
   <div class="timeline-item-wrapper timeline-item">
        <div class="timeline-marker"></div>
        <div class="timeline__content">
           <div class="o-timeline__img timeline-bg">
              <img src="/sites/default/files/2021-01/reunion01-desktop.jpg" alt="">
           </div>
            
            <p class="timeline__content-date"></p>
            
            <h2 class="timeline__content-title"></h2>
            
             <div class="wysiwyg">
                    <p>Six personnes, dont une est contaminée, se réunissent dans une.</p>
             </div>
        </div>
    </div>

   
   <div class="timeline-item-wrapper timeline-item">
      <div class="timeline-marker"></div>
      <div class="timeline__content">
        <div class="o-timeline__img timeline-bg">
           <img src="/sites/default/files/2021-01/reunion02-desktop.jpg" alt="">
        </div>
        <p class="timeline__content-date"></p>
        <h2 class="timeline__content-title"></h2>
        <div class="wysiwyg">
           <p>Indépendamment de la distance,&nbsp;<strong>si les cinq autres personnes</strong>&nbsp;passaient quatre heures sans masques</p>
        </div>
       </div>
    </div>

   
   <div class="timeline-item-wrapper timeline-item">
        <div class="timeline-marker"></div>
        <div class="timeline__content">
            <div class="o-timeline__img timeline-bg">
                <img src="/sites/default/files/2021-01/reunion03-desktop.jpg" alt="">
            </div>
            <p class="timeline__content-date"></p>
            <h2 class="timeline__content-title"></h2>
            <div class="wysiwyg">
              <p><strong>Si on utilisait des masques,</strong>&nbsp;ce risque diminuerait jusqu’à quatre contaminations.&nbsp;</p>
            </div>
         </div>
    </div>

   
   <div class="timeline-item-wrapper timeline-item timeline-item--active">
        <div class="timeline-marker"></div>
        <div class="timeline__content">
            <div class="o-timeline__img timeline-bg">
                 <img src="/sites/default/files/2021-01/reunion04-desktop.jpg" alt="">
            </div>
            <p class="timeline__content-date"></p>
            <h2 class="timeline__content-title"></h2>
            <div class="wysiwyg">
                <p><strong>Le danger de contamination diminue</strong>&nbsp;jusqu’à moins d’une personne</p>
            </div>
        </div>
    </div>
</div>

https://imgflip.com/gif/4tdd6j OR

https://im.ezgif.com/tmp/ezgif-1-d311b28de417.gif

Answer 1

等待大神答复