Creazione avanzata Marquee con animazione CSS3
Oggi daremo un'occhiata a “tendone” di nuovo. In realtà ne abbiamo parlato nel nostro precedente post che parlava dell'utilizzo del -webkit-tendone proprietà, ma questa volta approfondiremo questo argomento.
In questo post, creeremo a tendone-like effetto usando l'animazione CSS3. In questo modo saremo in grado di aggiungere più funzionalità che non potrebbero essere raggiunte solo con il -webkit-tendone.
A meno che tu non abbia già familiarità con il modulo Animazione CSS3, ti consigliamo di dare un'occhiata ai seguenti riferimenti prima di procedere con questa documentazione:
- Animazioni CSS3 - W3School
- Animazioni CSS - Mozilla Dev. Rete
Nota anche che, al momento, CSS3 Animation può funzionare solo con Firefox 8+, Chrome 12+ e Safari 5.0+ con la versione con prefisso (-moz- e -webkit-). Tuttavia, utilizzeremo la versione ufficiale del W3C senza il prefisso per evitare di sovrapporre questo articolo a codici superflui.
Indirizzamento problema Marquee
Uno dei problemi con la selezione è che il testo è in continuo movimento. Questo comportamento è di disturbo alla lettura e il testo è anche difficile da leggere. Questa volta, proveremo a creare la nostra versione del perimetro e renderla più user-friendly. Per esempio; invece di far muovere il testo continuamente, lo fermeremo quando sarà completamente visibile, quindi l'utente può leggere il testo per un momento.
The Storyboard (sorta di)
Ogni creazione creativa e di design, come un logo, un'illustrazione o un sito Web, di solito inizia con uno schizzo. Nel campo della produzione di animazione, questo viene fatto con uno storyboard. Prima di iniziare qualsiasi codice, creeremo prima un una sorta di storyboard, per aiutarci a visualizzare la nostra animazione.
Come puoi vedere dallo storyboard precedente, abbiamo in programma di mostrare solo due righe di testo, che si muoveranno entrambe in sequenza da destra a sinistra.
Il nostro storyboard non è complicato come uno storyboard per film di animazione reali, ma il punto è: ora siamo in grado di visualizzare come sarà il nostro tendone.
Il markup HTML
Dal momento che la nostra animazione sarà semplice, il markup HTML sarà semplice come:
Come aggiungere i post relativi a WordPress senza plugin
Automatizza i tuoi file Dropbox con le azioni
Gli stili di base
Prima di lavorare attorno alle animazioni, aggiungiamo alcuni stili di base. Iniziamo aggiungendo una trama di sfondo per il html elemento.
html background: url ('... /images/skewed_print.png'); Successivamente, posizioneremo il riquadro al centro della finestra del browser e aggiungiamo alcuni dettagli come l'ombra interna, il colore di sfondo e i bordi.
.tendina larghezza: 500px; altezza: 50 px; margine: 25px auto; overflow: nascosto; posizione: relativa; border: 1px solid # 000; margine: 25px auto; background-color: # 222; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); box-shadow: inset 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Quindi, posizioneremo il testo - che in questo caso è racchiuso all'interno di un tag di paragrafo - assolutamente e dal assoluto la posizione farà collassare l'elemento, dovremo definire l'elemento della larghezza su 100% in modo da coprire la larghezza del suo genitore.
.tendone p posizione: assoluta; font-family: Tahoma, Arial, sans-serif; larghezza: 100%; altezza: 100%; margine: 0; altezza della linea: 50px; allineamento del testo: centro; colore: #fff; text-shadow: 1px 1px 0px # 000000; filtro: ombretto (colore = # 000000, offx = 1, offy = 1);
Diamo un'occhiata al risultato per un po '.
A questo punto, abbiamo fatto con tutti gli stili di base di cui abbiamo bisogno; sei libero di aggiungere o personalizzare gli stili. Tuttavia, ti suggeriamo di mantenere la dimensione specificata (altezza e larghezza) fino alla fine del tutorial.
L'animazione
In breve, l'animazione è una presentazione di oggetti in movimento. Ogni movimento è definito in un intervallo di tempo. Quindi, quando lavoriamo all'animazione, ci occupiamo principalmente di Tempo. Prendiamo in considerazione aspetti come:
- Quando l'oggetto inizia a muoversi?
- Quanto tempo ci vuole perché l'oggetto si sposti da un punto all'altro?
- Quando e quanto tempo dovrebbe rimanere l'oggetto in un dato punto?
Nell'animazione CSS3, il tempo può essere definito con @keyframe sintassi. Ma, prima di saltare in questa sezione, specifichiamo prima la posizione iniziale del testo di selezione.
Abbiamo pianificato che il testo inizierà da destra e poi si sposterà a destra. Quindi, qui prima lo posizioneremo a destra usando la proprietà di trasformazione CSS3.
.tendone p transform: translateX (100%);
Ricorda il 100% che abbiamo definito per il nostro elemento di paragrafo era uguale al suo genitore larghezza. Quindi, lo stesso verrà applicato anche qui; l'elemento del paragrafo sarà tradotto a destra per 100% che in questo esempio è uguale a 500px.
I fotogrammi chiave
Il @keyframe la sintassi può essere un po 'sconcertante per alcune persone, quindi qui abbiamo creato una semplice guida visiva per aiutarti a capire facilmente cosa sta succedendo nel @keyframe sintassi.
Clicca qui per vedere la versione più grande.
L'intera animazione durerà circa 20 secondi ed è diviso in due sequenze durature 10 secondi ogni.
Nella prima sequenza, il primo testo scorre istantaneamente da destra e rimane momentaneamente visibile per consentire all'utente di leggere il testo, mentre il secondo testo rimane nascosto. Nella seconda sequenza, il testo della prima tendina scorrerà verso sinistra, e il secondo testo verrà immediatamente inserito dalla destra.
E qui ci sono tutti i codici dei keyframe che dobbiamo applicare per eseguire l'animazione.
@keyframes left-one 0% transform: translateX (100%); 10% transform: translateX (0); 40% transform: translateX (0); 50% transform: translateX (-100%); 100% transform: translateX (-100%); @keyframes left-two 0% transform: translateX (100%); 50% transform: translateX (100%); 60% transform: translateX (0); 90% transform: translateX (0); 100% transform: translateX (-100%);
Il sinistra-one i fotogrammi chiave definiranno la prima sequenza dell'animazione, mentre il sinistra-due i fotogrammi chiave definiranno la seconda sequenza.
Applicazione dell'animazione agli elementi
Affinché l'animazione funzioni, non dimenticare di applicare l'animazione all'elemento. La prima sequenza viene applicata per il primo testo o in questo caso primo paragrafo e la seconda sequenza viene applicata anche per il secondo paragrafo.
.marquee p: nth-child (1) animation: left-one 20s facilità infinita; .marquee p: nth-child (2) animation: left-two 20s facilità infinita;
Abbiamo finito con la nostra animazione; vediamo i risultati sul browser.
- dimostrazione
- Scarica fonte
indennità
Possiamo anche definire il testo di selezione per spostarlo dall'alto verso il basso o viceversa, proprio come abbiamo fatto nel nostro post precedente. Ecco come farlo; sostituisci i nostri codici di animazione sopra con questo sotto a sposta il testo verso il basso:
.tendone p transform: translateY (-100%); @keyframes down-one 0% transform: translateY (-100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (100%); 100% transform: translateY (100%); @keyframes down-two 0% transform: translateY (-100%); 50% transform: translateY (-100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (100%);
Si noti che abbiamo cambiato il Asse X a Y e lancia tutto traduzione valore negativo a positivo e viceversa.
Abbiamo anche ribattezzato l'animazione a down-uno e down-due, quindi dobbiamo riapplicare il nome dell'animazione anche nell'elemento paragrafo.
.marquee p: nth-child (1) animation: down-one 20s ease infinite; .marquee p: nth-child (2) animazione: down-two 20s facilità infinita;
Oppure, se vuoi muoverlo al contrario; dal basso verso l'alto. Ecco tutti i codici che devi applicare:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) animation: up-one 20s facilità infinita; .marquee.up p: nth-child (2) animation: up-two 20s facilità infinita; @keyframes up-one 0% transform: translateY (100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (-100%); 100% transform: translateY (-100%); @keyframes up-two 0% transform: translateY (100%); 50% transform: translateY (100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (-100%);
- dimostrazione
- Scarica fonte
Conclusione
Nonostante la mancanza del supporto corrente del browser, l'animazione CSS3, se eseguita correttamente, risolverà indubbiamente molti problemi di usabilità in futuro, come abbiamo fatto in questo esempio. Se abbiamo bisogno solo di una breve animazione pensata per i browser moderni, usare l'animazione CSS3 è probabilmente meglio che dover caricare uno script jQuery.
Infine, siamo consapevoli che questo articolo potrebbe essere un po 'travolgente per alcune persone, quindi se avete domande su questo articolo, sentitevi liberi di postarlo nella sezione commenti qui sotto.
