Filoweb.it

Creare un sistema solare con 3 pianeti

FB TW G+ whatsapp RSS FEED

Creare un sistema solare con 3 pianeti

Visualizzare l'esempio a questo link


Note: Questo toutorials funziona solo con i browsers che supportano il "web kit"
WebKit è un motore di rendering per browser web utilizzato per il rendering delle pagine web. Originariamente sviluppato da Apple, nel 2005 è stato reso open source.

La parte che ci interessa nello script è quella relativa alle righe webkit:

"-webkit-animation-iteration-count:infinite;" indica che l'animazione sarà ripetuta all'infinito
"-webkit-animation-timing-function:linear;" indica che l'animazione avrà la stessa velocità dall'inizio alla fine
"-webkit-animation-name:tgira;" indica il riferimento all'animazione "-webkit-animation-duration:15s;" indica la durata dell'animazione

Fino a qua tutto è molto semplice direi.
Adesso scriviamo la nostra animazione nel file CSS o nello stile della pagina:

@-webkit-keyframes tgira {
from { -webkit-transform:rotate(0deg) }
to { -webkit-transform:rotate(360deg) }
}

Questo indica che la trasformazione dell’oggetto parte da una rotazione di 0 gradi per finire ad una di 360.
Salviamo il nosto file CSS con il nome: cssmuove.css oppure mettiamolo nella pagina stessa.

Adesso nel nostro file html inseriamo la terra come div:

<div id="orbitat"><div id="terra">Terra </div></div>

Salviamo e lanciamo, vediamo che il pianeta terra si muove in un orbita circolare. Possiamo far, adesso, ruotare la terra intorno al suo asse mentre ruota intorno al sole, aggiungiamo nell'identificatore della terra, nel file css le seguenti righe

-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:tgira;
-webkit-animation-duration:5s;

Salviamo e lanciamo, vediamo che il pianeta terra ruota anche su se stesso.
Creiamo adesso il sole, gli altri pianeti e lo sfondo; Per ogni pianeta creiamo una diversa "orbita" ed una diversa velocità di rotazione (di seguito solo per il pianeta terra).

#terra{    position:absolute;    top:0;    left:0;    width:40px;    height:40px;    background-image:url(terra.PNG);    border-radius:50%;    -webkit-animation-iteration-count:infinite;    -webkit-animation-timing-function:linear;    -webkit-animation-name:tgira;    -webkit-animation-duration:5s; }
#orbitat{ width:500px; height:300px; position:absolute; margin-left:100px; margin-top:150px; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -webkit-animation-name:tgira; -webkit-animation-duration:15s;}

e per finire nel nostro codice CSS scriviamo la rotazione:

@-webkit-keyframes tgira { 
from { -webkit-transform:rotate(0deg) }  to  { -webkit-transform:rotate(360deg) }
}
 

Da notare che tutti i pianeti usano una sola animazione tgira che viene usato sia per l'orbita dei pianeti che per la rotazione dei pianeti. Ogni animazione ha un tempo diverso: -webkit-animation-duration:Xs; dove x indica i secondi della rotazione.

Il nostro file HTML avrà i tag dei pianeti come in esempio:

<div id="orbitav"><div id="venere">Venere</div></div>
<div id="orbitat"><div id="terra">Terra </div></div>
<div id="orbitam">
<div id="marte">Marte</div></div>
<div id="sole">SOLE</div>

-------
script completo
-------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<title>Pianeti</title>

<style type="text/css">
body { background-color:#000; background-image:url(sfondo.jpg); color:#FFF; font-family:Verdana, Geneva, sans-serif; font-size:10px; margin-top:30px;}
#terra{    position:absolute;    top:0;    left:0;    width:40px;    height:40px; background-image:url(terra.PNG);    border-radius:50%; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -webkit-animation-name:tgira; -webkit-animation-duration:5s;}
#orbitat{ width:500px; height:300px; position:absolute; margin-left:100px; margin-top:150px; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -webkit-animation-name:tgira; -webkit-animation-duration:15s;}
#orbitav{ width:300px; height:200px; position:absolute; margin-left:150px; margin-top:201px; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -webkit-animation-name:tgira; -webkit-animation-duration:7s;}
#venere {    width:10px; height:10px; background-image:url(venere.png); background-repeat:no-repeat;}
#orbitam{ width:620px; height:320px; position:absolute; margin-left:20px; margin-top:150px; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -webkit-animation-name:tgira; -webkit-animation-duration:25s;}
#marte {    width:30px; height:29px; background-image:url(marte.png); background-repeat:no-repeat; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -webkit-animation-name:tgira; -webkit-animation-duration:9s;}
#sole { width:100px; height:100px; background-image:url(sole.png); background-repeat:no-repeat; position:absolute; margin-left:230px; margin-top:250px; }
@-webkit-keyframes tgira { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) }}
</style>
 
</head>

<body>
 
<div id="orbitav"><div id="venere">Venere</div></div>
<div id="orbitat"><div id="terra">Terra </div></div>
<div id="orbitam"><div id="marte">Marte</div></div>
<div id="sole">SOLE</div>

 

</body>

</html>

 

FB TW G+ whatsapp RSS FEED

filoweb.it è il sito personale di Filippo Brunelli
(c) 2017 Filippo Brunelli
Le immagini ed i testi contenuti nel sito sono di proprietà di Filippo Brunelli salvo diversamente indicato.
L'uso delle immagini e del testo è gratuito per uso personale ed è subbordinato alla citazione della fonte.
Brunelli Filippo declina ogni responsabilità per l'uso che viene fatto delle informazioni presenti nel sito.