La magia di CSS3
Cominciamo subito questo articolo dicendo che Javascript e CSS3 permettono di rendere una pagina web "animata" e interattiva. La differenza tra questi due linguaggi risiede nel livello di complessità: per animare pagine web con Javascript bisogna essere a conoscenza di porzioni di codice complessi, mentre con CSS3 il tutto risulta più semplice senza impattare sulla performance e l'aspetto.
Avevo già accennato qualcosa riguardo le animazioni in QUESTO ARTICOLO, ma è doveroso spiegare meglio questo concetto importante. Quando si parla di animare una pagina web si sta parlando di animazioni, transizioni, transformazioni e di alcune potenti librerie che sono in grado di produrre effetti grafici notevoli. La libreria che andremo a vedere in questo articolo è denominata "Animate.css".
Entriamo subito nel vivo, illustrando le transizioni. Ribadisco, la teoria è stata già spiegata perciò in questo articolo ci concentremo più che altro sulla pratica.
Le transizioni consentono il passaggio graduale tra due valori in un preciso spazio temporale. In poche parole:
Passa il cursore del mouse (o tocca) qui sopra.
In sostanza si crea un elemento "div" con un id, e col CSS si applica il seguente codice:
#transizione {
width: 150px;
height: 75px;
background: #211C1E;
border:1px white solid;
padding:2px 4px 2px 4px;
transition: width 2s ease-out 1s;
}
#transizione:hover {
width: 300px;
}
Tralasciando il resto, l'unica riga di codice che ci interessa è "transition: width 2s ease-out 1s" che sarebbe l'equivalente di:
transition-property: width;
transition-delay: 1s;
transition-duration: 2s;
transition-timing-function: ease-out;
Per quanto riguarda le transformazioni 2D ci sono quattro effetti da esaminare: traslazione, rotazione, scalatura e distorsione. La trasformazione 3D ha un quinto effetto che sarebbe la prospettiva.
Passa il cursore del mouse (o tocca) qui sopra.
In questo esempio vengono applicati contemporaneamente i quattro effetti, creando un elemento "div" che forma un quadrato, dopodichè viene applicato questo codice:
.quadrato:hover {
transition: 2s ease-in-out; transform: translate(20px, 15px) rotate(360deg) scale(1.2) skew(2deg, 2deg);
background-color: #211C1E;
}
Ora tocca all'esempio della "prospettiva" che, in questo esempio, permetterà di realizzare un cubo tridimensionale:
Il codice HTML da utilizzare è:
<div class="ex1">
<div class="cube">
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
</div>
Mentre il codice CSS da utilizzare è:
.ex1 {
perspective: 800px;
}
.cube {
font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style: preserve-3d;
transform: rotateX(-45deg) rotateY(30deg);
}
.side {
position: absolute;
width: 2em;
height: 2em;
background: rgba(100,100,100,0.5);
border: 1px solid white;
text-align: center;
line-height: 2em;
}
.front {transform: translateZ(1em);}
.top {transform: rotateX(90deg) translateZ(1em);}
.right {transform: rotateY(90deg) translateZ(1em);}
.left {transform: rotateY(-90deg) translateZ(1em);}
.bottom {transform: rotateX(-90deg) translateZ(1em);}
.back {transform: rotateY(-180deg) translateZ(1em);}
Come ultimo esempio troviamo le animazioni. Queste ultime consentono il passaggio graduale dello stile ad un elemento della pagina. Tutto questo avviene specificando un keyframe. Il keyframe determina il tipo di stile da applicare all’elemento ad un determinato istante temporale.
Per realizzare l'esempio qui sopra si crea una classe di nome "elemento" e tramite il CSS si esegue questo codice:
.elemento {
height: 200px;
width: 200px;
background-color: white;
animation:
pulsazione 3s ease infinite alternate,
nudge 5s linear infinite alternate;
border-radius: 100%;
}
@keyframes pulsazione {
0%, 100% {
background-color: white;
}
50% {
background-color: #211C1E;
}
}
@keyframes nudge {
0%, 100% {
transform: translate(0, 0);
}
50% {
transform: translate(50px, 0);
}
80% {
transform: translate(-50px, 0);
}
}
