JSFiddle - React, Tailwind, and code Playground

by endikoa

HTML

<input type='hidden' id='nbre_ann' value='3'>
<div id='annonces'>
    <div id='wrapper'>
<div id='annonce1' class='annonce_module'>
<span class='titre_l1' style='color:#da7b00;'>Flyers</span>
</div>
<div id='annonce2' class='annonce_module'>
<span class='titre_l1' style='color:#5eb1c2;'>Routage</span>
</div>
<div id='annonce3' class='annonce_module'>
<span class='titre_l1' style='color:#bf0287;'>Flyers</span>
</div>
</div>
</div>

CSS

body {
    background-color:#00307d;
}
#annonces{
float:right;
height: 250px;
overflow: hidden;
position: relative;
right: 0;
width: 770px;
}
#wrapper{
position:absolute;
top:0;
}
#annonces > div > div {
font-family: Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;
padding: 20px;
cursor: pointer;
float: left;
position: relative;
width: 730px;
height: 208px;
top:0;
border:1px  solid #fff;
}
#annonces > div > div .titre_l1{
font-size: 4em;
font-weight: 600;
left: 0.7em;
top: 0.2em;
}

JavaScript

function anim(){
	var nbre_annonce = $('#nbre_ann').val();
	var pause_annonce = 1000;
	var vitesse_annonce = 1000;
	var hauteur_annonce = 250;
	var new_pos = 0;
	var move = hauteur_annonce;
	for (var i = 1; i < nbre_annonce; i++){
		new_pos = new_pos-hauteur_annonce;
		$("#annonces > div").delay( pause_annonce ).animate({"top":new_pos}, vitesse_annonce);
	}
	for (var i = 1; i < nbre_annonce; i++){	
		move_down = new_pos+hauteur_annonce*i;
			$("#annonces > div").delay( pause_annonce ).animate({"top":move_down}, vitesse_annonce);
	}
}

$(document).ready(function() {
    //setInterval('anim();', 1); 
anim();
});