Contenuto
- 01. Effetto di testo al passaggio del mouse
- 02. Crea CSS
- 03. Posiziona la parola
- 04. Ancora e ancora
- 05. In bilico verso il basso
- 06. Automatico per le persone
- 07. Aggiungi classi alternate
I link di rollover sono un ottimo modo per attirare l'attenzione di un utente, soprattutto se fa qualcosa di insolito o originale. Middle Child ha un grande effetto, raramente visto altrove, che cattura ogni lettera e le divide con l'animazione, che si attiva quando il visitatore si libra sopra la parola. L'animazione aiuta a trasmettere il carattere giocoso del marchio di sandwich.
In questo articolo, ti mostriamo come ricreare l'effetto sul tuo sito. Per ulteriore ispirazione, dai un'occhiata alla nostra guida ai migliori esempi di animazione CSS (con istruzioni su come codificarli). Per qualcosa di un po 'diverso, prova uno dei migliori costruttori di siti web o la nostra scelta del miglior cloud storage. E se stai rendendo il tuo sito più complesso, assicurati che il tuo hosting web sia perfetto.
01. Effetto di testo al passaggio del mouse
Uno dei fantastici effetti di testo sul sito Web di Middle Child è per gli effetti di rollover nel menu, in cui le lettere si dividono sul testo e ruotano leggermente. Inizia con alcuni semplici tag HTML.
div> div> Colazione / div> / div>
02. Crea CSS
Utilizzare un file CSS separato o tag di stile per aggiungere le seguenti regole CSS e fare in modo che la pagina riempia l'intera dimensione del browser assicurandosi che il corpo e il wrapper occupino l'intera altezza disponibile.
corpo {larghezza: 100%; altezza: 100%; margine: 0; imbottitura: 0; } .wrapper {display: grid; altezza: 100%; }
03. Posiziona la parola
Il parola class centra la parola nella griglia. Qualsiasi testo a cui viene fornito il file parola classe può avere questo applicato. Il su la classe verrà applicata a tutte le altre lettere e queste si sposteranno verso l'alto.
.word {font-size: 3em; margine: auto auto; } .word .up {display: inline-block; trasformare: translate3d (0px, 0px, 0px) rotate (0deg); transizione: tutti gli 0,5 di facilità in uscita; }
04. Ancora e ancora
Ora il giù class condivide impostazioni molto simili al su ma il passaggio del mouse mostra il movimento verso l'alto per il su rotolare. Anche verso l'alto è leggermente ruotato per migliorare l'aspetto.
.word .down {display: inline-block; trasformare: translate3d (0px, 0px, 0px) rotate (0deg); transizione: tutti gli 0,5 di facilità in uscita; } .word: hover .up {transform: translate3d (0px, -8px, 0px) rotate (12deg); colore: # 058b05}
05. In bilico verso il basso
Quando l'utente passa il mouse sul testo, la classe down sposta il testo verso il basso. Successivamente in JavaScript il testo verrà suddiviso in intervalli separati con le classi aggiunte automaticamente agli intervalli alternati.
.word: hover .down {transform: translate3d (0px, 8px, 0px) rotate (-12deg); colore: # 058b05; }
06. Automatico per le persone
È un po 'una seccatura dover mettere ogni lettera in intervalli alternati con classi diverse, quindi automatizzeremo il processo facendo in modo che JavaScript interroghi il selettore e prenda ogni lettera. Qui il file str variabile afferra la lettera corrente mentre scorre nel testo.
script> var elements = document.querySelectorAll (’.word’); for (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; elementi [i] .innerHTML = ’’;
07. Aggiungi classi alternate
Ora un altro ciclo inserisce ogni lettera nel proprio elemento span e aggiunge il su o giù classe alle campate. Se guardi questo nel browser vedrai il testo diviso per ogni lettera su e giù, ruotando leggermente.
Puoi vedere l'effetto in azione sul sito web di Middle Child.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); elementi [i] .appendChild (spn); spn.textContent = str [j]; lascia pos = (j% 2)? 'sottosopra'; spn.classList.add (pos); }} / script>
Questo articolo è stato originariamente pubblicato nella rivista di web design creativo Web designer.Acquista numero 286 o sottoscrivi.
