JSFiddle - React, Tailwind, and code Playground

by Alarr

HTML

<div class="rightBanner"></div>
<div class="topBanner"></div>

CSS

.rightBanner,
.topBanner {
    width: 100px;
    height: 100px;
    background: #f00;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.rightBanner {
    position: fixed;
    right: -100px;
    top: 200px;
}

.topBanner {
    position: fixed;
    right: 200px;
    top: -100px;
}

.rightBanner.slideRight {
    right: 0;
}

.topBanner.slideTop {
    top: 0;
}

JavaScript

$( document ).ready(function() {
    
    function toggleElements(){
         $(".rightBanner").toggleClass('slideRight');
		 setTimeout(function(){
			$(".topBanner").toggleClass('slideTop');
		},3000);
    }
    
    function hideElements(){
        setTimeout(function() {
            toggleElements();
        }, 3000);
    }
    
    function cikleElements(){
        setInterval(function(){
            toggleElements();
            hideElements();
        },10000);
    }
    
    setTimeout(function() {
        toggleElements();
    }, 1000);
    
    setTimeout(function() {
        cikleElements();
    }, 5000);
    
});