Vanilla Javascript information ticker with setTimeout delay infinite loop

I’m trying to display an information ticker using purely just vanilla JS (no jQuery etc).

I have a div <div class="postcode-panel"></div> with some text saying:

Latest information for XXX – This is to be displayed for 3 seconds

This div then fades out of view and displays the next div <div class="rating-panel"></div> with the text saying:

Rating 5.4 – This is to be displayed for 15 seconds.

Once the div .rating-panel has been viewed for 15 seconds then the first div .postcode-panel then loops back and displays for 3 seconds and this then just loops infinitely. I’m controlling the fade out animations with CSS, but I’m having difficulty getting all the different timeouts to work in the JS.


Update: I’ve managed to update my code to get the code to show and hide but I can’t get it to it within the correct timings.

Here is a JS Fiddle.

And below is my code

function postcode () {
        var postcodePanel = document.querySelector(".postcode-panel");
        var ratingPanel = document.querySelector(".rating-panel");
        var activeClass = 'active';

        function start() {

            setTimeout(function() {
                

                setTimeout(function(){
                    postcodePanel.classList.remove(activeClass);
                    ratingPanel.classList.add(activeClass);
                }, 3000);
                
                setTimeout(function(){
                    start();
                }, 15000);
                postcodePanel.classList.add(activeClass);
                ratingPanel.classList.remove(activeClass);
                
            },100);
        }

        start();
    }
    window.addEventListener('load', postcode);
.info-panel {
    position:relative;
    background:blue;
    color:white;
    padding:20px;
    font-size:20px;
}


.postcode-panel {
    display:block;
    position:absolute;
    opacity: 0;
}

.postcode-panel.active {
    animation:ticker-pc 3s ;
}

.rating-panel {
    opacity: 0;
}

.rating-panel.active {
    animation:ticker-rr 12s ;
}

@keyframes ticker-pc {
    0% {
        opacity: 0;
        -webkit-transform:translateY(30px);
        transform:translateY(30px);
    }

    10% {
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
    50% {
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }

    90% {
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform:translateY(-30px);
        transform:translateY(-30px);
    }
}

@keyframes ticker-rr {
    0% {
        opacity: 0;
        -webkit-transform:translateY(30px);
        transform:translateY(30px);
    }

    2% {
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
    50% {
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }

    97% {
        opacity: 1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform:translateY(-30px);
        transform:translateY(-30px);
    }
}
<div class="info-panel">
  <div class="postcode-panel active">
    <span class="latest-info">
      Latest information for
      <span class="postcode-info">
        XXX
      </span>
    </span>
  </div>
  <div class="rating-panel">
    <span class="rating">
      Rating <span class="score">5.4</span>
    </span>
  </div>
</div>

8 thoughts on “Vanilla Javascript information ticker with setTimeout delay infinite loop”

Leave a Comment