Negli ultimi anni jQuery è diventato il modo più semplice e meglio supportato per implementare semplici animazioni online. JavaScript è eccezionalmente bravo in ciò che fa e questo articolo non è in alcun modo un argomento contro di esso.
Tuttavia, CSS3 offre uno sguardo su un possibile futuro in cui le animazioni di base vengono eseguite con CSS dritto completamente indipendente dallo scripting. Oggi daremo un'occhiata a come utilizzare CSS3 per creare un menu di navigazione divertente e unico che utilizza @ font-face, transforms e transitions.
introduzione
La navigazione del tuo sito web può comunicare molto sulla tua attività o servizio. La navigazione pulita e utilizzabile è un punto fermo nel buon web design ed è sempre la tua scommessa più sicura.
Tuttavia, se si sta creando un sito che non deve necessariamente essere così professionale, la navigazione offre un luogo ideale per divertirsi un po 'e inserire un po' di personalità.
Per dare un'occhiata a ciò che costruiremo, dai un'occhiata alla demo live. Ho aggiunto alcuni contenuti segnaposto ma l'idea principale qui è il menu di navigazione.
Clicca qui per vedere la demo
L'HTML
Per iniziare il nostro progetto, incolla il seguente modello HTML5 vuoto. Notare che ho lanciato HTML5 Shiv per far sì che IE e HTML5 giochino bene insieme.
Quindi, lancia una semplice lista non ordinata nella parte del corpo. Includere alcuni collegamenti e qualsiasi testo che si desidera per le singole voci di menu.
Che ci crediate o no, questo è davvero tutto ciò di cui abbiamo bisogno qui. Potremmo tornare indietro e modificarlo un po 'più tardi, ma nel complesso il nostro menu di navigazione rimarrà piuttosto semplice e facile da riunire in pochi minuti.
Stili di base
Quindi creare un file CSS, eseguire un ripristino di base e aggiungere alcune impostazioni di base del corpo. Dato che questo progetto è così semplice, non abbiamo bisogno di un fantastico reset CSS, ma spesso aiuta a garantire che tutti i browser si trovino sulla stessa pagina con margini e riempimento.
La prossima cosa che vogliamo fare è prendere la nostra lista verticale, farla fluire orizzontalmente e aggiungere un effetto hover. Fallo con il seguente codice
Non c'è niente qui non hai visto mille altri posti. Spostando una lista non ordinata a sinistra, inseriamo tutti gli elementi della lista sulla stessa riga (ricordati di cancellare i tuoi float se aggiungi altri contenuti!). Oltre a questo abbiamo semplicemente distanziato gli elementi e applicato un colore hover.
Aggiungeremo effetti di volo in sospensione più tardi, ma è importante che non dipendiamo interamente da loro. Se vogliamo una degradazione graduale tra i browser, il menu dovrebbe essere completamente funzionante senza alcun CSS3. Come puoi vedere nell'immagine qui sotto, abbiamo ottenuto questo obiettivo e ora dovremmo avere un semplice menu di testo che cambia colore al passaggio del mouse.
Personalizzazione del carattere
Dato che ci stiamo solo divertendo, voglio usare un font pazzo. La mia opzione preferita per l'implementazione di caratteri personalizzati online è pure @ font-face usando la sintassi Bulletproof @ font-face di Paul Irish.
In questo modo non dobbiamo preoccuparci di sistemi di terze parti, domini, registrazioni, ecc. Possiamo semplicemente trovare un font che ci piace e lanciarlo direttamente via CSS.
Font Squirrel
L'impostazione di caratteri con @ font-face non è il compito più semplice se sei un principiante. Innanzitutto devi trovare un font che è legale da usare (che può essere un grosso problema), quindi devi rintracciare più versioni del font e collegare quelle versioni alla sintassi Bulletproof; è un vero dolore.
Fortunatamente, Font Squirrel ha preso quasi tutto il lavoro fuori dal processo con i loro kit @ font-face pre-costruiti.
Un kit di font @ face contiene tutto ciò di cui hai bisogno: i caratteri, il codice, un esempio, ecc. Basta sfogliare il sito fino a trovare un kit che ti piace e fare clic sul pulsante di download. Ho deciso di andare con Kulminoituva sotto la? Novità? sezione. È un pazzo carattere di lettera maiuscole 3D che normalmente non userei mai, quindi è perfetto per questo progetto.
Dopo aver scaricato il kit, copia i caratteri nella directory principale della tua pagina e oltre il testo incluso nel tuo file CSS.
Se hai seguito il link di sintassi bulletproof sopra, dovresti sapere cosa fa tutto questo codice. In caso contrario, l'unica cosa che devi veramente sapere è che la prima riga ci dice come fare riferimento al carattere altrove nel nostro codice: 'KulminoituvaRegular'
Quindi ora applichiamo una famiglia di font agli elementi della lista usando lo stesso metodo che useremmo normalmente usando il nostro nuovo font come predefinito.
E ora il nostro menu di navigazione dovrebbe sembrare molto più divertente.
Ora abbiamo un piccolo menu di navigazione abbastanza decente. Si noti che abbiamo applicato anche alcuni caratteri di backup in modo che ovunque @ font-face non funzioni, verrà invece caricato Helvetica.
Per terminarlo, aggiungiamo alcune animazioni CSS3.
Animazione del menu
Attualmente il modo migliore per fare animazioni CSS è un processo in due fasi che coinvolge sia le trasformazioni che le transizioni. Quindi la prima cosa che vogliamo fare è decidere come manipolare gli oggetti nel nostro menu usando una trasformazione, quindi applicheremo una transizione per animare la trasformazione.
Se dai un'occhiata al carattere che abbiamo scelto vedrai che le lettere sono tutte ruotate avanti e indietro per conferirle una sorta di sensazione sciatta disegnata a mano. Lo useremo come ispirazione per la nostra trasformazione e introdurremo un po 'più di rotazione quando l'utente passa sopra un link. Per dare ancora più enfasi, introdurremo anche un effetto di ridimensionamento.
Trasformare il testo su Hover
Con le trasformazioni CSS abbiamo quattro opzioni di base: ruotare, ridimensionare, inclinare e tradurre (spostare a sinistra ea destra). Dal momento che non vogliamo che il nostro testo si distorca o si muova troppo, continueremo a ruotare e scalare.
La sintassi per l'implementazione di questi è super base e convenientemente identica tra le versioni di Mozilla, Webkit e Opera.
Come puoi vedere, abbiamo semplicemente applicato una rotazione di -10 gradi e un leggero ridimensionamento di 1.2. Ora quando si passa con il mouse su un link nella navigazione, dovrebbe apparire ruotato e più grande.
Dopo aver giocato un po 'con questo, ho deciso che non mi piaceva il fatto che tutti i link ruotassero allo stesso modo. Il testo sembra un po 'più casuale di così ho voluto introdurre qualche variazione qui.
La soluzione consiste nell'applicare le classi agli elementi della lista nel nostro codice HTML in modo da poterne modellare alcuni indipendentemente dagli altri.
Ora che abbiamo due classi diverse, possiamo applicare una rotazione separata a ogni altro link in modo che il primo e il terzo link ruotino in senso antiorario e il secondo e il quarto link ruotino in senso orario.
Ecco! Ora abbiamo un fantastico effetto di rotazione al passaggio del mouse. L'ultima cosa che vogliamo risolvere è la transizione. Attualmente, il passaggio del mouse sul testo provoca una rotazione immediata. Vogliamo che questo sia graduale come si potrebbe trovare in un fantastico effetto jQuery.
Animare la rotazione
Il nostro ultimo passo è aggiungere una transizione CSS3 per animare l'effetto hover. Come per le trasformazioni, le transizioni sono molto facili da implementare e contengono la stessa sintassi di base per Webkit, Mozilla e Opera.
Tutto quello che devi fare è impostare la proprietà che vuoi animare (in questo caso? All?), La durata e l'andamento. Puoi scegliere tra facilità, linearità, facilità d'uso, disinvoltura e facilità d'uso. Ciò influenza il modo in cui l'animazione sale e rallenta.
Come puoi vedere, abbiamo applicato la stessa transizione a entrambe le classi. Sentiti libero di variare questo se vuoi e cambia la transizione della prima o della seconda classe.
Tutto finito!
Questo completa il nostro menu di navigazione. Clicca qui per vedere la demo dal vivo. Ricorda che puoi usare queste tecniche di animazione su qualsiasi cosa tu voglia, non solo testo. Prova a creare una galleria di miniature o qualcos'altro guidato dall'immagine che utilizza lo stesso effetto.
Pensieri di chiusura
Ovviamente, gli utenti di IE sperimenteranno solo un menu semplice (anche se sarà completamente funzionante). Stai decisamente meglio con JavaScript se desideri che animazioni come questa funzionino su tutti i browser. Inoltre, il testo tende a diventare un po 'discontinuo in Webkit durante la transizione. Ho trovato questo abbastanza fastidioso ma non riuscivo a capire una correzione (fammi sapere se lo fai!).
Nonostante qualsiasi argomento contro il suo utilizzo, le animazioni CSS sono sicuramente divertenti da giocare ed estremamente facili da implementare. Lascia un commento qui sotto con un link alle fantastiche animazioni CSS3 che hai creato insieme a una breve descrizione delle proprietà che hai usato.