Basta un pizzico di fantasia e le tecnologie web oggi a nostra disposizione ci consentono di sbizzarrirci nel creare oggetti, forme e disegni sulle nostre pagine in maniera mai vista prima. In questo tutorial impareremo a creare, animare e auscultare un cuore pulsante.

Partiamo dal nostro solito, semplice HTML:

<div class="container"><br />    <div id="cuore_prima"></div><br />    <div id="cuore"></div><br />    <div id="cuore_dopo"></div><br /></div>

Qui abbiamo un container, il nostro div principale ("#cuore") e due div, "prima" e "dopo". Da notare che non abbiamo usato le pseudo-classi ":before" e ":after" perchè queste non sono utilizzabili con jQuery – mentre come vedremo tra poco noi dobbiamo poter accedere a questi div da JavaScript.

Passiamo al CSS:

.container {<br />    position: relative;<br />}<br />#cuore {<br />    position: relative;<br />}<br />#cuore_prima, #cuore_dopo {<br />    position: absolute;<br />    content: "";<br />    left: 70px; top: 0;<br />    width: 70px;<br />    height: 115px;<br />    background: red;<br />    -moz-border-radius: 50px 50px 0 0;<br />    border-radius: 50px 50px 0 0;<br />    -webkit-transform: rotate(-45deg);<br />    -moz-transform: rotate(-45deg);<br />    -ms-transform: rotate(-45deg);<br />    -o-transform: rotate(-45deg);<br />    transform: rotate(-45deg);<br />    -webkit-transform-origin: 0 100%;<br />    -moz-transform-origin: 0 100%;<br />    -ms-transform-origin: 0 100%;<br />    -o-transform-origin: 0 100%;<br />    transform-origin: 0 100%;<br />}<br />#cuore_dopo {<br />    left: 0;<br />    -webkit-transform: rotate(45deg);<br />    -moz-transform: rotate(45deg);<br />    -ms-transform: rotate(45deg);<br />    -o-transform: rotate(45deg);<br />    transform: rotate(45deg);<br />    -webkit-transform-origin: 100% 100%;<br />    -moz-transform-origin: 100% 100%;<br />    -ms-transform-origin: 100% 100%;<br />    -o-transform-origin: 100% 100%;<br />    transform-origin :100% 100%;<br />}

La parte importante, qui, è relativa a "prima" e "dopo". In sostanza saranno due div rettangolari a cui prima diamo un border-radius di 50px e che poi trasformiamo girandone uno (quello "prima") di 45 gradi verso sinistra (in "meno") e l'altro di 45 gradi verso destra ("più").

Il risultato? Eccolo qua:

Beat!

Adesso però è ora di far batter, questo nostro bel cuore! Per prima cosa carichiamo jQuery e la libreria per gestire il suono (l'ottima Buzz che abbiamo visto in un nostro precedente articolo):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" language="javascript"></script><br /><script src="buzz.min.js" language="javascript"></script>

Dopodichè, ecco il nostro JavaScript (semplificato, la gestione dei bottoni di avvio/stop e del suono la lasciamo come compito del lettore – oppure basta guardare il sorgente del nostro script… ;):

$(document).ready(function() {<br />    // creiamo il nostro battito, calmo e rilassato...<br />    started = setInterval(batti, 1300);<br />});<br /><br />function batti()<br />{<br />    // animiamo i due div "prima" e "dopo", li facciamo diventare un po' più grandi (il cuore si "espande")...<br />    $('#cuore_prima, #cuore_dopo').animate({ 'height' : '120' }, 150, function() {<br />        // ...e poi li facciamo ritornare normali (il cuore si "contrae"<br />        $(this).animate({ 'height' : '115' }, 170);<br />    });<br />}

Il risultato finale è questa roba qua (cliccate sull'icona del cuore per farlo "partire"):

Script completo e sorgenti: http://html5today.it/labs/cssheart/index.html

 

Alla prossima! :)

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis