Durante lo sviluppo di pagine Web ricorriamo spesso all'utilizzo di animazioni per creare maggiore movimento ed ottenere inoltre un miglior risultato finale. Esistono diverse tipologie di animazioni e anche diversi linguaggi che permettono di dare loro forma. Tra i più comuni troviamo Javascript e CSS.
Ed è proprio di quest'ultimo che approfondiamo il funzionamento. Durante la lezione vedremo infatti come animare il testo di un documento HTML utilizzando esclusivamente CSS. Il risultato dell'esercizio che affronteremo in questo articolo è il seguente:
Creare un'animazione con CSS
CSS è un linguaggio di formattazione usato per definire lo stile di pagine Web che consente di sfruttare le sue regole assegnando loro delle variazioni chiamate appunto animazioni. Per creare animazioni in CSS dovremo prima capire cosa sono i keyframe. Si tratta di elementi che permettono di definire il cambiamento di stile durante un certo intervallo di tempo. Un'animazione ha bisogno di keyframe di riferimento proprio perché definiscono la transizione degli stili.
Apriamo quindi il nostro code editor preferito e creiamo un nuovo documento. Definiamo la struttura e diamo un titolo all'esercizio.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Come creare uno scroll text con animazione infinita</title>
</head>
<body>
</body>
</html>Proseguiamo con lo sviluppo partendo dal contenitore più esterno che avrà il compito di ospitare al suo interno tutti gli elementi coinvolti.
<div id="main_container">
</div>Per realizzare l'effetto scorrimento del testo avremo bisogno di inserire all'interno del <div> principale anche un altro elemento contenitore che sarà protagonista del movimento.
<div id="main_container">
<div class="stage_animation">
</div>
</div>A questo punto possiamo inserire la nostra stringa di testo.
<div id="main_container">
<div class="stage_animation">
<p>Questo testo scorrerà lentamente e per sempre.</p>
</div>
</div>Le regole di stile
Fatto ciò possiamo pensare allo stile, apriamo dunque il tag <style> e definiamo le prime regole di formattazione:
<style>
#container {
max-width: 450px;
overflow: hidden;
background-color: #f1f1f1;
}
</style>
Come avrai notato ho impostato una larghezza ben definita per il container e questo è essenziale in quanto l'animazione avrà il compito di ripetere all'infinito la stringa di testo inserita all'interno del tag <p>. Quindi serve che il contenitore non sia più grande del testo, o meglio dei testi. Per ripetere l'animazione in loop dobbiamo infatti duplicare la stringa di testo. Otterremo in questo modo due stringhe di testo che si alterneranno creando l'effetto finale che stiamo cercando.
<div id="container">
<div class="stage_animation">
<p>
Leggi bene questo testo perché scorrerà lentamente e per sempre.
</p>
<p>
Leggi bene questo testo perché scorrerà lentamente e per sempre.
</p>
</div>
</div>
Un elemento molto importante è la regola overflow:hidden; assegnata al contenitore principale #container in quanto dovrà mascherare la parte di testo non visibile. Continuiamo e concentriamoci sullo stile del contenitore interno, .stage_animation, e del paragrafo.
#container {
background-color: red;
}
.stage_animation {
overflow: hidden;
white-space: nowrap;
display: inline-block;
}
.stage_animation p {
display: inline-block;
font-family: arial;
color: #fff;
font-size: 30px;
}
Definire l'animazione
A questo punto possiamo lavorare sull'animazione. Creiamo un nuovo elemento @keyframes ed assegniamo un nome specifico per poterlo richiamare. Utilizziamo la funzione CSS translate3d(); che permette di posizionare un elemento all'interno di uno spazio 3D stabilendo che l'elemento protagonista dovrà essere collocato di seguito e muoversi da destra verso sinistra grazie alla regola transform: translate3d(-50%, 0, 0);. Otterremo così l'effetto scorrimento:
@keyframes stage_animation {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-50%, 0, 0);
}
}A questo punto dobbiamo "accendere" l'animazione e assegnare quanto stabilito all'interno dei @keyframes.
.stage_animation {
animation: stage_animation 5s linear infinite;
}Ricordiamoci di inserire il valore infinite per mostrare a loop la nostra animazione CSS.
Ora che abbiamo ottenuto l'animazione desiderata possiamo pensare di inserirla all'interno di un contesto.
Il movimento all'interno del contesto
L'idea è quella di usare lo scorrimento per creare l'effetto di un messaggio in movimento. Nell'esempio che creeremo andremo infatti a posizionare il testo in movimento al di sopra dell'ingresso di uno shop, come visto in introduzione dell'articolo, per ottenere il seguente risultato.
Iniziamo quindi selezionando un'immagine a piacimento e inserendola all'interno del file di lavoro. Creiamo inoltre un contenitore ancor più esterno il quale avrà il compito di contenere tutti gli elementi compresa la nuova immagine.
<div id="main_container">
<img src="bkg-animate-scroll-infinite.png">
<div id="container">
<div class="stage_animation">
<p>
Leggi bene questo testo perché scorrerà lentamente e per sempre.
</p>
<p>
Leggi bene questo testo perché scorrerà lentamente e per sempre.
</p>
</div>
</div>
<style>
#main_container{ width: 600px; height: auto; position: relative;}
#main_container img{ width: 100%; height: auto; }
</style>
Fatto ciò, cambiamo il testo inserendo un contenuto testuale in linea con il risultato finale.
<div id="main_container">
<img src="bkg-animate-scroll-infinite.png">
<div id="container">
<div class="stage_animation">
<p>We're <span style="color:#6fff76;">OPEN</span> <span style="text-decoration: underline;">from 8:00 until 19:00</span> Thank you.</p>
<p>We're <span style="color:#6fff76;">OPEN</span> <span style="text-decoration: underline;">from 8:00 until 19:00</span> Thank you.</p>
</div>
</div>
</div>
Infine lavoriamo sul colore di sfondo del <div> #contenitore e soprattutto sulla sua posizione, in quanto dovrà combaciare perfettamente con l'immagine selezionata per ottenere il miglior risultato finale.
<style>
#main_container{ width: 600px; height: auto; position: relative;}
#main_container img{ width: 100%; height: auto; }
#container {
max-width: 600px;
overflow: hidden;
position: absolute;
top: 317px;
left: 0;
z-index: 1;
background-color: #111;
height: 145px;
}
.stage_animation {
overflow: hidden;
white-space: nowrap;
display: inline-block;
animation: stage_animation 5s linear infinite;
margin-top: 25px;
}
.stage_animation p {
display: inline-block;
font-family: arial;
color: #fff;
font-size: 30px;
}
@keyframes stage_animation {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-50%, 0, 0);
}
}
</style>