Come scorrere caselle con i CSS

July 25

Come scorrere caselle con i CSS


Prima di relativamente nuovi fogli di stile a cascata Web, o CSS, standard di --- --- CSS3 progettisti hanno dovuto creare animazioni semplici, come una scatola che scorre attraverso o su e giù per una pagina Web, con Flash. CSS3, un linguaggio di formattazione di elementi Web, consente di creare questi tipi di animazioni con i fogli di stile incorporati nel codice HTML. HTML è il linguaggio di markup Web predominante. Il vantaggio di utilizzare CSS3 per creare semplici animazioni è che il codice CSS non richiede browser dell'utente per scaricare i file flash esterno ad alta intensità di risorse.

istruzione

1 Inizia una nuova pagina Web nel programma che si utilizza per l'editing HTML. È possibile utilizzare l'XHTML Transitional DOCTYPE standard di settore per la pagina. Il codice di partenza dovrebbe essere simile a questo:

<! 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>

<Meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />

<Title> Animazione </ title>

Il <title> coppia di tag può, naturalmente, contenere qualsiasi titolo che si desidera.

2 Crea il selettore scatola CSS. In CSS, un selettore definisce un oggetto o un'area sulla pagina. È possibile effettuare la casella qualsiasi dimensione e colore che si desidera. Il codice CSS seguente crea una scatola nera di 200 per 200 pixel. Inserirlo direttamente sotto il <title> coppia di tag.

<Style>

scatola {

width: 200px;

height: 200px;

background-color: black;

position: absolute;

top: 0px;

sinistra: 0px;

}

Per modificare il formato della scatola, cambiare la "larghezza" e la proprietà "altezza". Per modificare il colore di dialogo, modificare la proprietà "background-color". Gli ultimi tre proprietà impostate la posizione della scatola --- in questo caso, l'angolo superiore sinistro della pagina.

3 Creare il selettore di controllo di animazione CSS. Il codice seguente utilizza le estensioni WebKit, che funzionano con la maggior parte dei browser. Inserirlo direttamente sotto il codice selettore di scatola.

.squarePath {

-webkit-animazione-name: squarePath;

-webkit-animazione-Durata: 8s;

-webkit-animazione-timing-function: la facilità-in-out;

-webkit-animazione-iterazione count: infinita;

}

Il "-animazione-name webkit" proprietà definisce il nome dell'animazione per fare riferimento nel codice JavaScript che esegue l'animazione. I prossimi tre proprietà impostare la durata dell'animazione di 8 secondi, con e in-and-out facilità e un conteggio di iterazione infinita. "Ease" è un effetto speciale di animazione che crea pause lungo il percorso di animazione. Un facilità impostato su "in-out" mette in pausa all'inizio e alla fine del percorso. Per mettere in pausa un'animazione a solo l'inizio del percorso, è necessario utilizzare "facilità in", per esempio. Il "iterazione-count" imposta il numero di volte in cui l'animazione esegue. "Infinite" è un'animazione senza fine.

4 Creare il selettore di percorso di animazione. Il codice seguente crea una a quattro punti, percorso quadrato. Le slide della scatola attraverso la pagina a destra, in basso nella pagina, attraverso la pagina verso sinistra, e poi la pagina nella posizione originale. Inserirlo direttamente sotto il codice creato nel passaggio 3.

@ -webkit-Fotogrammi chiave squarePath {

da parte di {

top: 0px;

sinistra: 0px;

}

25% {

top: 0px;

sinistra: 200px;

}

50% {

top: 200px;

sinistra: 200px;

}

75% {

top: 200px;

sinistra: 0px;

}

100% {

top: 0px;

sinistra: 0px;

}

}

</ Style>

Si noti che le "top" e le proprietà "sinistra" dicono l'animazione in cui, misurata in pixel, per fermare la casella di scorrimento. Il </ style> tag chiude il codice CSS.

5 Creare il JavaScript. Il seguente codice esegue l'animazione in base alle istruzioni stabilite nelle selettori CSS. Inserirlo direttamente sotto il </ style> tag di chiusura.

<Script type = "text / javascript">

funzione di spostamento () {

document.getElementById("box").className = "squarePath";

}

</ Script>

</ Head>

Si noti che lo script sa che le istruzioni per utilizzare facendo riferimento il selettore "squarepath" creata nel passaggio 3. Il </ head> chiude la sezione head della pagina.

6 Posizionare l'animazione nella sezione corpo della pagina. La sezione del corpo è dove vengono visualizzati gli elementi della pagina. Il seguente codice dice al browser che selettore CSS da utilizzare facendo riferimento il selettore "#box" creata nel passaggio 2. Inserire il codice direttamente sotto il </ head> tag di chiusura.

<Body onload = "move ()">

<Div id = "box">

</ Div>

</ Body>

</ Html>

Il "onload =" proprietà dice al browser per avviare l'animazione quando la pagina viene caricata. Il </ body> tag chiude la sezione del corpo della pagina, e il tag </ html> chiude, o finisce, la pagina Web.

Consigli e avvertenze

  • È possibile modificare questa animazione in molti modi, tra cui la forma di scatola, dimensione e colore, così come il percorso di animazione e la facilità, sostituendo le proprietà CSS3 esistenti con altre proprietà valide. È possibile trovare un elenco completo delle proprietà CSS3 validi al sito del W3C. W3C è il consorzio che sviluppa e mantiene gli standard Web.
  • Non tutti i browser supportano le estensioni WebKit. Tuttavia, coloro che non hanno un estensione di loro, come ad esempio .moz per i browser basati su Mozilla. Non è raro avere per creare diverse versione del codice CSS per accogliere tutti i browser.

Articoli Correlati