Come codificare gli effetti di testo intelligenti con CSS

Feb 2, 2026
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

8 caratteristiche CSS all'avanguardia (e come usarli)

Come si fa Feb 2, 2026

(Immagine di immagine: Getty Images) CSS è in continua evoluzione e una serie di nuove eccitanti funzionalità è st..

Crea una scena con Renderman per Maya

Come si fa Feb 2, 2026

(Immagine di immagine: Jeremy Heintz) In questo Renderman per il tutorial Maya, copriremo una varietà di argomenti a..

8 Incredibili tutorial di progettazione grafica

Come si fa Feb 2, 2026

Sia che tu stia appena iniziando in graphic design o un professionista stagionato, c'è sempre qualcosa di nuovo da imparare se vuoi rimanere davanti al gioco. La disciplina del design grafic..

10 cose che non sapevi che potresti fare con Photoshop

Come si fa Feb 2, 2026

Photoshop è un perfetto esempio dell'intero essere maggiore della somma delle sue parti, di cui ce ne sono molti; Un tesoro trab..

Utilizzare Chart.js per trasformare i dati in diagrammi interattivi

Come si fa Feb 2, 2026

Pagina 1 di 2: Usando Chart.js: Passaggi 01-10 Usando Chart.js: Passaggi ..

Inizia con la piattaforma di animazione Greensock

Come si fa Feb 2, 2026

GreenSock Animation Platform (GSAP) consente di animare qualsiasi cosa è possibile accedere con JavaScript inclusa DOM, tela e C..

Modellazione procedurale master

Come si fa Feb 2, 2026

La prossima volta che sei in città, esamina il modo in cui sono costruiti edifici moderni. Cosa vedi? Ripetizione e molto. Una p..

Dipingi una lepre maliziosa in acquerello

Come si fa Feb 2, 2026

Avendo studiato zoologia, animali e fauna selvatica sono sempre stata una grande passione per me e non mi stanco mai di diparlarli. Siamo abbastanza fortunati da vivere nella campagna del Lin..

Categorie