Vai al contenuto principale

Come creare un'animazione di scorrimento dello sfondo del testo colorato con Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

La creazione di un'animazione di scorrimento dello sfondo del testo è un modo unico per aggiungere trame animate colorate al testo del tuo sito web mentre un utente sta scorrendo la pagina. Con Divi, il processo è sorprendentemente facile una volta che hai imparato alcune tecniche chiave.

In questo tutorial, utilizzeremo solo la potenza delle impostazioni integrate di Divi per creare 3 design unici che presentano un'animazione di scorrimento dello sfondo del testo colorato. Ti mostreremo anche come creare una versione oscura di ogni design per un look completamente nuovo.

Cominciamo!

Possibile risultato

Ecco uno sguardo ai progetti che costruiremo oggi.

Design 1: gradiente di sfondo del testo con effetto di scorrimento orizzontale

Questo primo design presenterà un effetto di scorrimento orizzontale che anima un modulo separatore colorato dietro un modulo di testo con il filtro dello schermo.

Aggiungi una colonna

Per iniziare, aggiungi una riga di una colonna alla sezione predefinita.

Scegli il layout della colonna divi

Aggiungi un modulo di testo

Quindi aggiungi un nuovo modulo di testo alla colonna.

Aggiungi modulo di testo divi

Contenuto

Per il contenuto della colonna, incolla il seguente codice HTML nell'area contenuto:

Salva il codice del frammento

Formattazione del testo

Quindi aggiornare il disegno del testo come segue:

  • Colore di sfondo: #ffffff
  • Stile carattere testo: TT
  • Colore del testo: # 000000
  • Dimensioni del testo: 100 px (desktop), 40 px (telefono)
  • Spaziatura lettere di testo: 0.15em
  • Altezza della riga di testo: 1em
  • Allineamento del testo: centro
  • Carattere del titolo: Merriweather
  • Peso carattere titolo: grassetto
  • Stile carattere titolo: TT
  • Allineamento del testo dell'intestazione: centro
  • Colore testo intestazione: # 000000
  • Dimensioni del testo dell'intestazione: 200 px (desktop), 80 px (telefono)
  • Spaziatura della lettera del titolo: 0.15em
  • Altezza della riga del titolo: 1em

Imbottitura e filtro

Ora abbiamo bisogno di aggiungere un po 'di riempimento e filtro dello schermo al modulo di testo. Il filtro è necessario affinché questo design funzioni poiché è ciò che consente ai colori / modifiche di sfondo di mostrare dietro il testo.

Per aggiungere il riempimento e il filtro, aggiorna quanto segue:

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

  • imbottitura: 15px alta, 20px bassa
  • Metodo di fusione: schermo

Nota: la modalità di fusione schermo funziona meglio con testo nero su sfondo bianco. Se volessimo usare il testo bianco su uno sfondo nero, useremmo la modalità di fusione Moltiplica.

Configurazione della spaziatura del modulo di testo Divi

Separatore superiore e inferiore

Una volta completato il nostro modulo di testo, aggiungiamo alcuni separatori (sopra e uno sotto il modulo di testo) per un ulteriore elemento di design.

Aggiungi un separatore inferiore

Aggiungi un nuovo modulo di separazione sotto il modulo di testo.

Aggiungi il modulo separatore divi
Impostazioni di separazione più elevate

Aprire le impostazioni del separatore e selezionare NO per visualizzare il separatore.

effetti di scorrimento sfondo testo divi

Quindi aggiorna lo sfondo e assegna al divisore la stessa modalità di fusione del modulo di testo come segue:

  • Colore sfondo sfumato sinistro: # 000000
  • Colore di sfondo sfumato a destra: #ffffff
  • Direzione gradiente: 90deg
  • Posizione iniziale: 48%
  • Posizione finale: 0%
  • Metodo di fusione: schermo
Configurazione del separatore di colori

Quindi aggiorna l'altezza del divisore sullo schermo del telefono come segue:

  • Altezza: 15 px (telefono)
Configurazione separatore Divi

Aggiungi separatore superiore

Per creare il divisore superiore, duplica il divisore inferiore precedente e trascinalo sopra il modulo di testo utilizzando l'area di visualizzazione dei livelli.

Inserto separatore Divi

Quindi invertire i colori sullo sfondo sfumato.

Inserimento di sfondo sfumato

Aggiorna i parametri della linea

Una volta installati i separatori superiore e inferiore, aggiorna i parametri di linea come segue:

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

  • Larghezza della grondaia: 1 (per rimuovere i margini inferiori tra i moduli)
  • Larghezza massima: 600 pixel (per mantenere un design coerente su desktop e tablet)
  • Allineamento della linea: centro
  • Imbottitura: 0px alta, 0px bassa
  • Straripamento orizzontale: nascosto
  • Straripamento verticale: nascosto
Personalizza il parametro della linea divi

Crea un separatore per il colore di sfondo del testo animato

L'ultimo elemento di questo primo disegno è il divisore che useremo per animare il colore di sfondo del testo sullo scorrimento. Per fare ciò, aggiungi un nuovo modulo di separazione sotto il divisore inferiore.

Inserimento separatore

Quindi selezionare NO per visualizzare il separatore.

Mostra divi seprator

Impostazioni del divisore di sfondo

Aggiorna il separatore con uno sfondo sfumato come segue:

  • Colore sfondo sfumato sinistro: # e02b20
  • Colore gradiente di sfondo a destra: # 8300e9
  • Direzione gradiente: 90deg
  • Posizione iniziale: 30%
  • Posizione finale: 70%
Divisorio posteriore Divi

Vogliamo che l'altezza del separatore sia abbastanza alta da colorare tutto il nostro testo nel modulo di testo e i separatori superiore e inferiore. Per questo design, imposta l'altezza su 400 px.

  • Altezza: 400px
Altezza divisoria divisoria

Quindi assegna al divisore una posizione assoluta per posizionarlo direttamente sopra gli altri moduli. Usa l'indice Z per posizionare il divisore dietro gli altri moduli.

  • Posizione: assoluta
  • Indice Z: -1
Separatore di indice
Effetti di scorrimento del divisore di sfondo

Con il separatore in posizione, tutto ciò che dobbiamo fare è spostare il separatore dietro il testo utilizzando gli effetti di scorrimento di Divi. Per questo design, aggiungeremo solo movimento orizzontale allo scorrimento.

Aggiorna i seguenti elementi:

Nella scheda Movimento orizzontale ...

ufficio

  • Attiva movimento orizzontale: SÌ
  • Avvia offset: 6 (al 20%)
  • Offset medio: 0 (al 40% -60%)
  • Fine offset: -6 (all'80%)

Telefono

  • Avvia offset: 3
  • Fine offset: -3

Inoltre, assicurati di impostare il trigger per l'effetto di movimento al centro della clip:

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

  • Attivare l'effetto di movimento: metà dell'elemento
Configurazione dell'animazione

Aggiungi spaziatura di sezione

Per creare uno spazio di scorrimento temporaneo per testare il disegno, aggiungere quanto segue alla sezione:

  • Margine: 80 vh sopra, 80 vh sotto
Configurazione dimensioni sezione divi

Considerazioni finali

I progetti di animazione dello sfondo del testo mostrati in questo articolo funzionerebbero perfettamente come un design statico senza il movimento di aggiunta sullo scorrimento. Tuttavia, gli effetti di scorrimento aggiuntivi portano davvero il design a un livello completamente nuovo. Sentiti libero di sperimentare più colori ed effetti!

Non vedo l'ora di sentirti nei commenti.

Alla tua salute!

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
0 azioni
quota
Tweet
Enregistrer