JSFiddle - React, Tailwind, and code Playground

by p424top

HTML

<img id="haunting" style="display:none" src="http://placeKitten.com/g/500/200" />
<div id="video">
    <img src="http://placekitten.com/200/200" />
    <div id="menu">Some text</div>
</div>

CSS

html, body {
    height: 100%;
}

#video {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width:200px;
    height:210px;
    text-align:center;
}
#haunting {
    position: absolute;
    top:0;
    left:0;
}

JavaScript

var images = [{src:"http://placeKitten.com/g/500/500", width: 500, height :500},
   {src:"http://placeKitten.com/g/300/300", width: 300, height : 300},
    {src:"http://placeKitten.com/g/600/600", width: 600, height : 600},
    {src:"http://placeKitten.com/g/400/400", width: 400, height : 400},,
    {src:"http://placeKitten.com/g/200/200", width: 200, height : 200}];


var counter = {
    val: 0,
    top: 0,
    left: 0
};

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function fadeImage(counter) {
    counter.top = getRandomInt(0,$("body").height() - images[counter.val].height);
    counter.left = getRandomInt(0,$("body").width() - images[counter.val].width);

    $("#haunting").fadeTo(2000, 1).delay(1000).fadeOut(20000);
    $("#haunting").attr({
        src: images[counter.val].src
    }).css({
        top: counter.top,
        left: counter.left
    });

    if (counter.val < images.length) counter.val++;
    else counter.val = 0;


}
setInterval(function () {
    fadeImage(counter);
}, 6000);