Come codificare gli effetti di testo intelligenti con CSS

Sep 14, 2025
Come si fa
Image: Middle Child
[Immagine: Bambino medio]

I collegamenti di rollover sono un ottimo modo per afferrare l'attenzione di un utente, specialmente se fanno qualcosa di insolito o originale. Bambino medio ha un grande effetto, raramente visto altrove, che cattura ogni lettera e le si divide di un'animazione, che calca quando il visitatore supera la parola. L'animazione aiuta a trasmettere il carattere giocoso del marchio sandwich.

In questo articolo, ti mostriamo come ricreare l'effetto sul tuo sito. Per più ispirazione, dai un'occhiata alla nostra guida al I migliori esempi di animazione CSS (con istruzioni su come codice). Per qualcosa di un po 'diverso, prova una cima Builder del sito web o la nostra scelta del meglio deposito cloud. . E se stai facendo il tuo sito più complesso, assicurati che il tuo web hosting è sul punto.

01. Effetto testo di rollover

Uno dei grandi effetti del testo sul sito Web del Bambino medio è per gli effetti del rollover sul menu, dove le lettere si separano sul testo e ruotano leggermente. Inizia questo con alcuni semplici tag HTML. 

 & lt; div class = "wrapper" e gt;
& lt; div class = "word" & gt; colazione & lt; / div & gt;
& lt; / div & gt;

02. Creare CSS.

Utilizzare un file CSS separato o tag di stile per aggiungere le seguenti regole CSS e rendere la pagina riempire la dimensione completa del browser assicurando il corpo e il wrapper prendere l'altezza completa. 

 Body {
Larghezza: 100%;
Altezza: 100%;
Margine: 0;
Imbottitura: 0;
}
.wrapper {
display: griglia;
Altezza: 100%;
}

03. Posizionare la parola

Il parola Classe centra la parola nella griglia. Qualsiasi testo che viene dato il parola La classe può averlo applicato. Il su La classe verrà applicata ad ogni altra lettera e questi si spostano verso l'alto. 

 .word {
Dimensione del carattere: 3Em;
Margine: Auto Auto;
}

.POM
{
display: blocco in linea;
Trasforma: Translate3d (0px, 0px, 0px)
ruotare (0DEG);
Transizione: tutti 0,5s facilità in-out;
}

04. Su e oltre

Ora il giù Le condivisioni di classe condividono le impostazioni molto simili al su Ma il mouse mostra il movimento verso l'alto per il su rotolare. Inoltre è anche ruotato leggermente per migliorare il look. 

 .word .down
{
display: blocco in linea;
Trasforma: Translate3d (0px, 0px, 0px)
ruotare (0DEG);
Transizione: tutti 0,5s facilità in-out;
}

.POMING: GOVER.
{
Trasforma: Translate3d (0px, -8px, 0px)
ruotare (12Deg);
Colore: # 058B05
}

05. Sovrapposizione

Quando l'utente ha subito il testo, la classe Down sposta il testo verso il basso. Più tardi in JavaScript il testo verrà suddiviso in campate separate con le classi aggiunte automaticamente a campate alternative. 

 .word: Hover .down {
Trasforma: Translate3d (0px, 8px, 0px)
ruotare (-12Deg);
Colore: # 058B05;
}

06. Automatico per le persone

È un po 'una seccatura che deve mettere ogni lettera in campate alternate con diverse classi, quindi automatizzeremo il processo ottenendo JavaScript per interrogare il selettore e prendere ogni lettera. Qui Str. La variabile afferra la lettera corrente mentre loop attraverso il testo. 

 & lt; script & gt;
VAR Elements = Document.QuerySeleTettoriale
('.parola');
per (var i = 0, l = elementi.length; io
& lt; l; I ++) {
var str = elementi [i] .textcontent;
elementi [i] .innerhtml = '';

07. Aggiungi classi alternati

Ora un altro ciclo posiziona ogni lettera nel proprio elemento di span e aggiunge il su o giù classe per le campate. Se guardi questo nel browser vedrai il testo diviso da ogni lettera su e giù, mentre ruota leggermente.

Puoi vedere l'effetto in azione sul Sito web del figlio centrale . 

 per (var j = 0, ll = str.length; j
& lt; ll; j ++) {
VAR SPN = Document.CreateSeelement ('span');
ELEMENTI [I] .AppENDCHILD (SPN);
spn.textcontent = str [j];
Lascia che pos = (j% 2)? 'sottosopra';
spn.classlist.add (POS);
}
 }
& lt; / script & gt;

Questo articolo è stato originariamente pubblicato su Creative Web Design Magazine Web designer . Comprare il problema 286. o sottoscrivi .

Per saperne di più:

  • Aggiungi filtri SVG con CSS
  • Come progettare con le forme CSS: un'introduzione
  • 5 Generatori di griglia Cool CSS

Come si fa - Articoli più popolari

Come utilizzare le immagini di riferimento: 13 suggerimenti essenziali per artisti

Come si fa Sep 14, 2025

(Immagine di immagine: Jonathan HARDESTY) Pagina 1 di 2: Pagina 1 ..

Step-by-Step: Come imitare vernice ad olio in Corel Painter

Come si fa Sep 14, 2025

Sembra solo ieri quando stavo giocando con gli amici delle scuole superiori nei mondi fantastici pieni di cavalieri, maghi, barbari e tesori nascosti nei dungeon. Come adolescenti, i possedim..

Impara a modellare una persona 3D in Zbrush e Maya

Come si fa Sep 14, 2025

Pagina 1 di 2: Pagina 1 Pagina 1 Pagina ..

Affinity Designer: come usare i vincoli

Come si fa Sep 14, 2025

Affinity Designer è un popolare Arte vettoriale attrezzo. Oltre alle versioni Mac e Windows, SERIF rec..

Texture A autenticamente indossato K-2SO Droid

Come si fa Sep 14, 2025

Pagina 1 di 2: Pagina 1 Pagina 1 Pagina ..

Converti una foto in un set VR

Come si fa Sep 14, 2025

Tipicamente quando qualcuno menziona la realtà aumentata o la realtà virtuale, potrebbero pensare ai videogiochi. È importante..

Crea un effetto Splash nel realflow

Come si fa Sep 14, 2025

Pagina 1 di 2: Pagina 1 Pagina 1 Pagina 2 In questo articolo, ho in..

Crea grafici interattivi in ​​Ionic 2

Come si fa Sep 14, 2025

Quando lavori in una piccola squadra, tende ad essere difficile scrivere e mantenere il codice separato per Android, IOS e Window..

Categorie