Petite animation Mario Kart en JS

Pour égayer un classement ou pour voir un peu plus loin.

HTML


<a class="perso" title="10"><img src="prono/22.gif" /><span><b>1<sup>er</sup></b> pseudo<br /><b>10 points</b></span></a>
<a class="perso" title="20"><img src="prono/10.gif" /><span><b>2<sup>ème</sup></b> pseudo<br /><b>20 points</b></span></a>
<a class="perso" title="30"><img src="prono/9.gif" /><span><b>3<sup>ème</sup></b> pseudo<br /><b>30 points</b></span></a>
<a class="perso" title="40"><img src="prono/7.gif" /><span><b>4<sup>ème</sup></b> pseudo<br /><b>40 points</b></span></a>
<a class="perso" title="50"><img src="prono/6.gif" /><span><b>5<sup>ème</sup></b> pseudo<br /><b>50 points</b></span></a>
<a class="perso" title="60"><img src="prono/5.gif" /><span><b>6<sup>ème</sup></b> pseudo<br /><b>60 points</b></span></a>
<a class="perso" title="70"><img src="prono/4.gif" /><span><b>7<sup>ème</sup></b> pseudo<br /><b>70 points</b></span></a>
<a class="perso" title="80"><img src="prono/3.gif" /><span><b>8<sup>ème</sup></b> pseudo<br /><b>80 points</b></span></a>
<a class="perso" title="90"><img src="prono/2.gif" /><span><b>9<sup>ème</sup></b> pseudo<br /><b>90 points</b></span></a>
<a class="perso" title="100"><img src="prono/1.gif" /><span><b>10<sup>ème</sup></b> pseudo<br /><b>10 points</b></span></a>
<div id="route"></div>

CSS


#route {
	background-image: url('prono/0a.gif');
	background-size: contain;
	}
.perso {
	position: absolute;
	}
.perso>img {
	width: 100%;
	}
.perso:hover span, .perso:focus span{
	transform: scale(1) rotate(0); 
	opacity: 1;	 
	}
.perso span {
	position: absolute;
	color: rgb(255,255,255);
	background: rgba(0,0,0,.8);
	padding: 10px;
	border-radius: 3px;
	box-shadow: 0 0 2px rgba(0,0,0,.5);
	transform: scale(0) rotate(-12deg);
	transition: all .25s;
	opacity: 0;
	z-index: 101;
	}

JS


var taille, pixels, posX, posY, liste, i;
var obj = document.getElementById("route");
var perso = document.getElementsByClassName('perso');
inforesize();
window.onresize = inforesize;
setInterval(frame, 33); // 33 ms = ~ 30 frames / seconde

function init_ () { // positionne
	liste = new Array ();
	for (i = 0; i < perso.length; i++) {
		var v = pixels / 100 * perso[i].getAttribute('title');
		perso[i].style.left = (posX + v)+'px';
		perso[i].style.top = (posY)+'px';
		liste[i] = new Array (
			(posX + v),
			posY,
			(posX + v),
			posY
			);
		}
	}
	
function inforesize () { // redimensionne
	taille = obj.clientWidth;
	pixels = Math.round(taille * 0.75);
	posX = obj.offsetLeft;
	obj.style.height = obj.style.marginTop = taille * 0.05;
	for (i = 0; i < perso.length; i++) {
		perso[i].style.width = taille * 0.05;
		perso[i].getElementsByTagName('span')[0].style.marginTop = taille * 0.05 * 1.5;
		perso[i].getElementsByTagName('span')[0].style.marginLeft = -taille * 0.05 * 1.5;
		}
	posY = obj.offsetTop - (taille * (0.05 / 4));
	init_();
	}

function posrand (ob1, ob2, ecart) { // déplacement random (actuelle, origine, ecart)
	var t = Math.round(Math.random() * (ob1+3 - ob1-1) + ob1-1);
	if (t > ob2 + ecart)
		t--;
	else if (t < ob2 - ecart)
		t++;
	return t;
	}

function frame () {
	for (i = 0; i < perso.length; i++) {liste[i][2] = posrand(liste[i][2], liste[i][0], 20); //x
		perso[i].style.left = liste[i][2]+'px';
		liste[i][3] = posrand(liste[i][3], liste[i][1], 5);	//y
		perso[i].style.top = liste[i][3]+'px';
		perso[i].style.zIndex = liste[i][3];
		}
	}

Télécharger l'archive (zip)

Écrire un commentaire

L'email renseigné ne sera pas publié sur le site.

Quelle est la deuxième lettre du mot mvolk ? :