In questo tutorial vedremo un semplice metodo per creare uno sfondo animato ad effetto scorrevole utilizzando esclusivamente le potenzialità offerte da CSS3.

Esempio | Download

Utilizzare questo effetto può sembrare abbastanza complicato per chi è ancora alle prime armi in questo campo, ma vedrete subito che non è così, infatti bastano pochissime righe di codice CSS3 per metterlo in pratica, senza necessità di appoggiarsi a linguaggi come JavaScript.

I codici

Vediamo i codici necessari per ricreare l’esempio sovrastante.

Codice HTML

<link rel="stylesheet" href="style.css">
<div id="sfondo">
<div id="uccello"></div>
</div>

 

  1. Richiamiamo il foglio di stile che inseriremo successivamente.
  2. Creiamo un <div> per lo sfondo inanimato sul quale inserire l’oggetto da animare
  3. Inseriamo all’interno un altro <div> che conterrà lo sfondo scorrevole

Il codice CSS

div#sfondo {
background: url('img/cielo.jpg');
background-position: right top;
height: 300px;
width: 1000px;
}
div#uccello {
background: url(img/uccello.png);
height: 257px;
width: 100%;
background-size: 140px auto;
background-repeat: no-repeat;
animation: anim-movimento 10s linear infinite;
-ms-animation: anim-movimento 10s linear infinite;
-moz-animation: anim-movimento 10s linear infinite;
-webkit-animation: anim-movimento 10s linear infinite;
}
@keyframes anim-movimento {
from {
background-position: 100% bottom;
}
to {
background-position: 0% bottom;
};
}
@-webkit-keyframes anim-movimento {
from {
background-position: 100% bottom;
}
to {
background-position: 0 bottom;
};
}
@-ms-keyframes anim-movimento {
from {
background-position: 100% bottom;
}
to {
background-position: 0 bottom;
};
}
@-moz-keyframes anim-movimento {
from {
background-position: 100% bottom;
}
to {
background-position: 100% bottom;
};
}

Dopo aver semplicemente impostato uno sfondo statico ai due <div> possiamo renderlo animato utilizzando la funzione animation per poi inserire come potete vedere le coordinate iniziali e finali del nostro movimento all’interno dei @keyframes.

Qui potete trovare un esempio e il download dei file appena creati: Esempio | Download

Spero vi sia stato d’aiuto.