Il tuo titolo è una delle parti più importanti della tua home page. Questo di solito è ciò che vedi per primo e quindi ciò che determina la prima impressione. Come ogni altra prima impressione, vuoi che sia buona. Ora, se stai cercando un modo creativo per presentare il tuo titolo, apprezzerai questo tutorial poiché ti mostreremo come aggiungere animazioni di blocchi di testo CSS al tuo titolo e puoi anche scaricare gratuitamente il file JSON del layout!
Panoramica
Prima di immergerci nel tutorial, diamo un'occhiata al risultato su schermi di dimensioni diverse.
Iniziamo il design
Aggiungi la sezione # 1
Sfondo sfumato
Inizia aggiungendo una sezione normale a una nuova pagina o alla pagina su cui stai lavorando. Apri le impostazioni della sezione e applica il seguente sfondo sfumato:
- Colore 1: # f0f2b
- Colore 2: # c10b1a
- Tipo di gradiente: lineare
- Direzione gradiente: 63 gradi
spaziatura
Passa alla scheda Design sezione e applica i seguenti valori di riempimento superiore e inferiore personalizzati su schermi di dimensioni diverse:
- Imbottitura superiore: 7vw (desktop), 20vw (tablet), 25vw (telefono)
- Imbottitura inferiore: 7vw (scrivania), 20vw (tablet), 25vw (telefono)
confine
Aggiungi anche un bordo alla sezione.
- Larghezza del bordo: 2vw (in alto, a sinistra, a destra)
- Larghezza bordo inferiore: 0vw
- Colore bordo: #ffffff
Aggiungi una nuova linea
Struttura a colonne
Continua ad aggiungere una nuova riga alla sezione utilizzando la seguente struttura di colonne:
dimensionamento
Aprire i parametri di linea e modificare i parametri di quotatura di conseguenza:
- Larghezza: 100%
- Larghezza massima: 100%
Aggiungi un modulo di testo alla colonna
Aggiungi contenuto H1
Quindi aggiungi un modulo di testo con un titolo H1 a tua scelta.
Aggiungi tag Div a ogni parola nel titolo H1
Passa alla scheda del testo della copia del titolo e aggiungi un div diverso a ciascuna parola del titolo. L'ID CSS deve essere diverso per ogni parola.
Pronto
a
Costruire
Bello
Siti web?
Impostazioni di testo H1
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H1 di conseguenza:
- Carattere del titolo: Work Sans
- Peso carattere titolo: medio
- Colore testo intestazione: #ffffff
- Dimensioni del testo dell'intestazione: 4vw (desktop), 5vw (tablet), 6vw (telefono)
- Altezza della linea di testa: 1,4 em
spaziatura
Quindi modificare i valori dei margini su diverse dimensioni dello schermo.
- Margine sinistro: 20vw (scrivania e tablet), 15vw (telefono)
- Margine destro: 35vw (desktop), 20vw (tablet), 15vw (telefono)
Aggiungi un modulo di codice alla colonna
Inserisci il codice CSS
Affinché l'animazione del blocco di testo si applichi al nostro titolo, avremo bisogno del codice CSS. Aggiungeremo questo codice CSS a un nuovo modulo di codice.
<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>
spaziatura
Passa alla scheda di progettazione del modulo e rimuovi tutto il riempimento inferiore predefinito.
- Margine inferiore: 0px
Aggiungi un modulo pulsanti alla colonna
Aggiungi una copia
Il prossimo modulo di cui abbiamo bisogno è un modulo pulsanti. Inserisci una copia a tua scelta.
Impostazioni dei pulsanti
Passa alla scheda di progettazione del modulo e modifica le impostazioni del pulsante di conseguenza:
- Usa stili personalizzati per il pulsante: Sì
- Dimensione testo pulsante: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Colore testo pulsante: #ffffff
- Colore sfondo pulsante: # 000000
- Larghezza bordo pulsante: 0px
- Carattere pulsante: Work Sans
spaziatura
Quindi vai alle impostazioni di spaziatura e applica i valori di margine e riempimento personalizzati su diverse dimensioni dello schermo.
- Margine superiore: 3vw (ufficio),
- Margine sinistro: 20vw (scrivania e tablet), 15vw (telefono)
- Imbottitura superiore: 1.2vw (desktop), 2vw (tablet), 4vw (telefono)
- Imbottitura inferiore: 1.2vw (scrivania), 2vw (tablet), 4vw (telefono)
- Imbottitura sinistra: 1.8vw (desktop), 3vw (tablet), 6vw (telefono)
- Imbottitura destra: 1.8vw (scrivania), 3vw (tablet), 6vw (telefono)
Animazione
Personalizza anche le impostazioni di animazione.
- Stile animazione: capovolgi
- Direzione dell'animazione: in basso
- Ritardo dell'animazione: 2000 ms
- Intensità dell'animazione: 100%
- Opacità inizio animazione: 100%
- Curva della velocità di animazione: facilità in entrata
- Ripetizione dell'animazione: una volta
Aggiungi la sezione # 2
Continua aggiungendo una nuova sezione regolare appena sotto quella precedente.
spaziatura
Apri le impostazioni della sezione e rimuovi l'imbottitura superiore predefinita.
- Imbottitura superiore: 0px
Aggiungi una nuova linea
Struttura a colonne
Continua ad aggiungere una nuova riga utilizzando la seguente struttura di colonne:
dimensionamento
Senza aggiungere altri moduli, aprire i parametri della linea e lasciare che la linea occupi l'intera larghezza del contenitore della sezione.
- Larghezza: 100%
- Larghezza massima: 100%
Aggiungi un modulo di testo alla colonna
Aggiungi contenuto
Successivamente, aggiungi un modulo di testo con a contenuto descrizione a tua scelta.
Colore di sfondo
Aggiungi un colore di sfondo bianco.
- Colore di sfondo: #ffffff
Impostazioni del testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:
- Carattere testo: Work Sans
- Colore del testo: # 9b9b9b
- Dimensioni del testo: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Altezza della riga di testo: 2.6em
spaziatura
Aggiungi anche valori di spaziatura personalizzati su schermi di dimensioni diverse.
- Margine superiore: -5vw (desktop), -20vw (tablet), -27vw (telefono)
- Margine sinistro: 20vw (scrivania), 13vw (tablet), 8vw (telefono)
- Margine destro: 20vw (desktop), 13vw (tablet), 8vw (telefono)
- Imbottitura superiore: 5vw (desktop), 7vw (tablet e telefono)
- Imbottitura inferiore: 5vw (scrivania), 7vw (tablet e telefono)
- Imbottitura sinistra: 3vw (desktop), 5vw (tablet), 6vw (telefono)
- Imbottitura destra: 3vw (scrivania), 5vw (tablet), 6vw (telefono)
Scatola delle ombre
E completa le impostazioni del modulo applicando un'ombra sottile della scatola. Questo è tutto!
- Resistenza della sfocatura dell'ombra della scatola: 50px
- Colore dell'ombra: rgba (0,0,0,0,1)
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.
Considerazioni finali
In questo articolo, ti abbiamo mostrato come aggiungere animazioni di blocchi di testo CSS al tuo titolo. È importante assicurarsi che il titolo sia visibile e letto dall'inizio, l'aggiunta di un'animazione al titolo può sicuramente aiutare! Sei stato anche in grado di scaricare gratuitamente il file JSON di layout. Se hai domande o suggerimenti, sentiti libero di lasciare un commento nella sezione commenti qui sotto.
Tradotto da: ElegantThemes
