Abbiamo già parlato di CSS e delle sue qualità grazie alle quali è possibile creare effetti ed animazioni personalizzate all'interno di pagine Web e siti Internet. Motivo per cui in questo articolo entreremo nei dettagli e creeremo un effetto di levitazione con rotazione che permetterà ad alcuni elementi di muoversi all'interno del nostro stage di lavoro.
Il risultato finale di quello che svilupperemo è una levitazione in stile Mars Attacks.
Come far ruotare e levitare elementi con CSS
Iniziamo lo sviluppo creando un nuovo documento HTML ed impostiamo la struttura della pagina Web per inserire tutti gli elementi nella giusta posizione.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Effetto levitazione con CSS in stile Mars Attacks</title>
</head>
<body>
</body>
</html>All'interno del documento andremo ad includere gli elementi HTML e CSS necessari alla creazione dell'effetto che vogliamo ottenere.
Dopo aver creato il nostro documento HTML dobbiamo pensare agli elementi che andremo ad inserire all'interno. Cerchiamo un'immagine che useremo come sfondo in linea con l'ambiente da ricreare.
Dopodiché estraiamo alcuni elementi che useremo come protagonisti dell'animazione. Per estrarre elementi da una fotografia si possono usare diversi programmi di fotoritocco o eventualmente cercare elementi PNG singoli ed inserirli all'interno dell'esercizio.
A questo punto la situazione dovrebbe essere la seguente: file di lavoro, immagine principale di sfondo ed elementi singoli estratti dalla fotografia principale o elementi singoli esterni.
Torniamo all'interno del documento di lavoro ed inseriamo l'immagine principale come sfondo dell'elemento <body></body> in modo da riempire lo stage di lavoro.
body {
width: 100%;
height: 100vh;
background-image: url(immagine-sfondo.jpg);
background-position: bottom center;
background-size: cover;
background-repeat: no-repeat;
}
Ora è il momento di inserire il primo elemento al quale assegneremo l'animazione. Apriamo quindi il tag <img> ed inseriamo la prima immagine.
<img src="rock1.png" />Ci spostiamo all'interno dello <style></style> e modelliamo il nostro elemento definendo una grandezza ed una posizione.
img {
width: 80px;
height: auto;
position: absolute;
bottom: 0;
}In seguito diamo il via all'animazione aggiungendo questa semplice stringa di codice:
animation: animate 25s linear infinite;In questo modo:
img {
width: 80px;
height: auto;
position: absolute;
bottom: 0;
animation: animate 25s linear infinite;
}Infine avviamo l'animazione definendo le proprietà dei keyframes, grazie ai quali è possibile non solo far muovere elementi, ma volendo anche modificare tutte le loro proprietà CSS.
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(-1000px) rotate(720deg);
}
}
In questo modo abbiamo creato la prima animazione CSS assegnando un asse di movimento ed una rotazione per rendere migliore l'effetto finale.
Ora proseguiamo con l'inserimento degli altri elementi e definiamo inoltre le dimensioni oltre che la velocità di animazione. Copiamo ed incolliamo quindi l'elemento immagine precedentemente sviluppato e creiamo altri elementi all'interno del nostro frame di lavoro, sostituendo l'immagine con le altre in modo da avere un effetto ancor più realistico.
<img src="rock1.png" />
<img src="rock2.png" />
<img src="rock3.png" />Anche per questi nuovi elementi definiamo la grandezza, la posizione ed infine la velocità di movimento. Per richiamare esattamente l'immagine desiderata assegniamo a tutte una classe identificativa in modo da poter agire sulle singole immagini in ogni momento, differenziando inoltre le caratteristiche.
<img class="element1" src="rock1.png" />
<img class="element2" src="rock2.png" />
<img class="element3" src="rock3.png" />Logicamente dovremo aggiornare anche le proprietà inserite all'interno del CSS aggiungendo il nome della specifica classe.
img.element1 {
width: 80px;
height: auto;
position: absolute;
bottom: 0px;
animation: animate 25s linear infinite;
}
img.element2 {
width: 25px;
height: auto;
position: absolute;
bottom: 100px;
left:200px;
animation: animate 23s linear infinite;
animation-delay: 2s;
}
img.element3 {
width: 40px;
height: auto;
position: absolute;
bottom: 0px;
left:300px;
animation: animate 20s linear infinite;
animation-delay: 1s;
}Oltre che personalizzare la dimensione dei nostri elementi possiamo impostare per ognuno una durata dell'animazione leggermente diversa ed aggiungere inoltre un piccolo ritardo di partenza utilizzando la proprietà CSS animation-delay per migliorare il risultato finale.
Arrivati a questo punto non rimane che definire il nostro esercizio inserendo altri elementi ai quali assegnare durate diverse per l'animazione.
<img class="element4" src="rock1.png" />
<img class="element5" src="rock2.png" />
<img class="element6" src="rock3.png" />
<img class="element7" src="rock1.png" />
<img class="element8" src="rock2.png" />
<img class="element9" src="rock3.png" />
<img class="element10" src="rock1.png" />
img.element4 {
width: 60px;
height: auto;
position: absolute;
bottom: 50px;
left:200px;
animation: animate 20s linear infinite;
animation-delay: 5s;
}
img.element5 {
width: 40px;
height: auto;
position: absolute;
bottom: 0px;
left:500px;
animation: animate 20s linear infinite;
animation-delay: 0s;
}
img.element6 {
width: 40px;
height: auto;
position: absolute;
bottom: 0px;
left:450px;
animation: animate 15s linear infinite;
animation-delay: 8s;
}
img.element7 {
width: 80px;
height: auto;
position: absolute;
bottom: 0px;
left:600px;
animation: animate 25s linear infinite;
animation-delay: 0s;
}
img.element8 {
width: 40px;
height: auto;
position: absolute;
bottom: 0px;
left:500px;
animation: animate 20s linear infinite;
animation-delay: 5s;
}
img.element9 {
width: 30px;
height: auto;
position: absolute;
bottom: 0px;
right:50px;
animation: animate 10s linear infinite;
animation-delay: 0s;
}
img.element10 {
width: 30px;
height: auto;
position: absolute;
bottom: 0px;
right:100px;
animation: animate 20s linear infinite;
animation-delay:3s;
}
