jQuery: grafico tridimensionale animato

Combinando jQuery e CSS si possono ottenere effetti molto interessanti. Un esempio è quello di un grafico tridimensionale il cui livello viene modificato dinamicamente in base alle scelte dell'utente. Vediamone i dettagli.

Partiamo dalla seguente marcatura:


<form action="#" method="post" id="form">
	<div>
		<label for="choice">Il tuo livello di conoscenza degli standard del Web</label>
		<select name="choice">
			<option value="">Scegli</option>
			<option value="284">Sufficiente</option>
			<option value="142">Buono</option>
			<option value="0">Ottimo</option>
		</select>
	</div>
</form>

<div id="graph">
	<img src="img/graphbackground.png" id="graphbackground" width="262" height="430" alt="" />
	<img src="img/graphbar.png" id="graphbar" width="262" height="430" alt="" />
	<img src="img/graphforeground.png" id="graphforeground" width="262" height="430" alt="" />
</div>

Il grafico è costituito da tre immagini che andranno sovrapposte con i CSS. Ecco gli stili:


#graph {
	width: 262px;
	height: 430px;
	position: relative;
	overflow: hidden;
}

#graphbackground, #graphforeground { position: absolute; }

#graphbar { 
	position: absolute; 
	top: 430px; 
}

label {
	display: block;
	font-weight: bold;
	padding-bottom: 5px;
}

select {
	font: 1em serif;
	width: 6em;
	display: block;
}

I valori di ciascun elemento option corrispondono ad altrettanti offset verticali dell'immagine con ID graphbar. Questa immagine è inizialmente nascosta perchè posta verticalmente fuori dal contenitore.

Con jQuery non dobbiamo fare altro che animare l'immagine utilizzando i valori scelti dall'utente:


$(function() {

	$('select[name=choice]', '#form').change(function() {
	
		var select = $(this);
		var value = $('option:selected', select).val();
		
		if(value != '') {
		
			$('#graphbar').animate({
				top: value
			}, 1000);
		
		}
	
	});

});

Potete visionare l'esempio finale di seguito.

Torna su