Ti piacerebbe progettare uno sfondo Divi animato durante lo scorrimento della pagina grazie a maschere e pattern? Questo tutorial fa per te...

Aggiunta di un'animazione di scorrimento a Divi e le sue maschere e motivi di sfondo sono un utile consiglio di design che può dare nuova vita ai tuoi disegni di sfondo. sito web

In questo tutorial, ti mostreremo come creare e animare maschere e motivi di sfondo utilizzando le opzioni di scorrimento di Divi (nessun codice personalizzato necessario). 

Per fare ciò creeremo un livello di sfondo mobile usando una linea Divi che utilizzeremo per animare maschere e motivi di sfondo quando un utente scorre una sezione di contenuto

Pensiamo che ti piacerà il risultato.

Cominciamo!

Panoramica

Ecco una rapida illustrazione di come sarà l'animazione di scorrimento in background per questo tutorial.

sfondo animato Divi durante lo scorrimento della pagina grazie a maschere e motivi

Il concetto

Il concetto di questo progetto non dovrebbe essere troppo difficile da comprendere. Iniziamo con una sezione che ha uno sfondo sfumato.

progettare uno sfondo Divi animato durante lo scorrimento della pagina utilizzando maschere e motivi

Quindi creiamo una linea posizionata (assoluta) in modo che copra completamente la sezione (come una sovrapposizione). Possiamo aggiungere un motivo di sfondo alla riga.

Successivamente possiamo aggiungere una maschera di sfondo alla colonna.

Poi aggiungiamo effetti di scorrimento a righe e colonne (come scala e rotazione) che animeranno il motivo e la maschera separatamente sullo sfondo della sezione.

progettare uno sfondo Divi animato durante lo scorrimento della pagina utilizzando maschere e motivi

Quando nascondiamo l'overflow della sezione, tutto ciò che vediamo è l'animazione contenuta all'interno della sezione.

sfondo animato Divi durante lo scorrimento della pagina grazie a maschere e motivi

Iniziamo creando una pagina con Divi Builder

Per iniziare, dovrai fare quanto segue:

Dalla dashboard di WordPress, vai a Pagine> Aggiungi nuovo per creare una nuova pagina.

progettare uno sfondo Divi animato durante lo scorrimento della pagina utilizzando maschere e motivi

Dagli un titolo che abbia senso per te e fai clic Usa il Divi Costruttore

#titolo_immagine

quindi fare clic su Inizia a costruire (Costruisci da zero)

progettare uno sfondo Divi animato durante lo scorrimento della pagina utilizzando maschere e motivi

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Leggi anche: Divi: come utilizzare il "Gradient Builder" per abbellire le tue immagini

Come creare maschere e pattern di sfondo a scorrimento animato con Divi

Disegno dello sfondo della sezione

Innanzitutto, salteremo la creazione di una riga e passeremo direttamente alla modifica della sezione predefinita esistente nel generatore di temi. 

Per fare in modo che il nostro design di sfondo riempia il browser, dobbiamo aggiungere un'altezza verticale alla sezione. Un modo semplice per farlo è aggiungere un'altezza minima alla sezione.

Apri le impostazioni della sezione. Sotto la scheda Design, aggiorna l'altezza minima e rimuovi la spaziatura interna come segue:

  • Margine: 80 vh (superiore e inferiore)
  • Imbottitura: 0px (superiore e inferiore)

Progettare un gradiente di sfondo per la sezione

Ora possiamo aggiungere un gradiente di sfondo personalizzato alla sezione.

Per aggiungere le prime interruzioni del gradiente, assicurati che le impostazioni della sezione siano aperte nella scheda Contenuti. Quindi selezionare la scheda Gradiente di sfondo e fai clic per aggiungere un nuovo gradiente. Questo aggiungerà due colori sfumati predefiniti. Aggiungi le seguenti Gradient Stops con colore e posizione come segue:

  • Gradiente si ferma:
    • 0%: #4158d0
    • 50%: #c850c0
    • 100%: #ffcc70

Quindi cambia la direzione del gradiente lineare:

  • Direzione del gradiente: 270 gradi

Aggiungi righe alla sezione

Ora che la nostra sezione è a posto, aggiungi una riga di una colonna alla sezione. Questa linea verrà utilizzata per la nostra maschera di sfondo e l'animazione di scorrimento del motivo.

Successivamente, duplica la linea che hai appena creato. Questa seconda riga (duplicata) verrà utilizzata per il nostro contenuto come faresti normalmente. 

Ora dovresti avere una riga superiore per l'animazione di scorrimento dello sfondo e una riga per il file contenuto Normale.

Personalizza la linea

Ora che abbiamo il gradiente di sfondo della nostra sezione pronto, possiamo rivolgere la nostra attenzione alla linea che useremo per la nostra animazione di sfondo su scorrimento. 

Apri le impostazioni della linea. Sotto la scheda Tecnologia, aggiorna quanto segue:

  • Posizione: Assoluta

Ciò consentirà alla linea di sovrapporsi alla sezione senza occupare alcuno spazio reale nel documento. 

Ora tutto ciò che dobbiamo fare è aggiornare l'altezza e la larghezza in modo che coprano l'intera larghezza e altezza della sezione. Questo creerà la sovrapposizione di cui abbiamo bisogno e il nostro secondo livello di progettazione dello sfondo.

Sotto la scheda Design, aggiorna le opzioni di dimensionamento come segue:

  • Altezza colonne Aquasize: SÌ
  • Larghezza: 100%
  • Larghezza massima: 100%
  • Altezza: 100%
  • Imbottitura: 0px (superiore e inferiore)

Ora potresti non essere in grado di vedere la linea, ma ora copre perfettamente lo sfondo dell'intera sezione.

Crea un motivo di sfondo per la linea

In questo esempio aggiungeremo il modello Coriandoli come sfondo della linea.

Apri le impostazioni della linea. Sotto l'opzione sfondo, seleziona la scheda Pattern di sfondo e aggiorna quanto segue:

  • Motivo di sfondo: coriandoli
  • Modello:
    • Colore: #f6bef7
    • Dimensioni: dimensioni personalizzate
    • Larghezza: 35 vw
    • Ripeti Origine: centro

NOTA : l'utilizzo dell'unità di lunghezza VW garantisce che il modello si ridimensioni con il browser, mantenendo il design coerente e reattivo.

Aggiungi effetti di scorrimento alla linea

Ora che il nostro motivo di sfondo è a posto, possiamo aggiungere effetti di scorrimento alla linea.

Vai alla scheda Tecnologia. Sotto l'opzione Effetti di scorrimento, aggiorna quanto segue:

Seleziona la scheda Movimento orizzontale e aggiorna quanto segue:

  • Abilita movimento orizzontale: SÌ
  • Compensazione iniziale: 0,5 (allo 0%)
  • Mid Offset: 0 (dal 40% al 60%)
  • Scostamento finale: -0,5 (al 100%)

Questo sposterà il motivo di sfondo della linea che inizia di 50 pixel a sinistra e termina di 50 pixel a destra.

Seleziona la scheda "Scale Up and Down" e aggiorna quanto segue:

  • Abilita ridimensionamento su e giù: SÌ
  • Scala iniziale: 150% (allo 0%)
  • Scala media: 100% (dal 40% al 60%)
  • Scala finale: 150% (al 100%)

Questo ridimensionerà il motivo di sfondo della riga durante lo scorrimento.

Come animare maschere e motivi di sfondo sullo scorrimento con Divi

Seleziona la scheda « Rotante  » e aggiorna quanto segue:

  • Abilita rotazione: SI
  • Rotazione iniziale: 10 gradi (a 0%)
  • Rotazione media: 0 gradi (dal 40% al 60%)
  • Rotazione finale: -10 gradi (al 100%)

SUGGERIMENTO CHIAVE: Devi mantenere la rotazione al minimo o rischi di mostrare spazi vuoti dove la linea non si estende oltre la sezione. Una buona regola pratica è aumentare la scala se si desidera aumentare la rotazione. Ciò consentirà alla linea di ruotare sulla sezione senza esporre i bordi.

Aggiungi maschera di sfondo con effetti di scorrimento alla colonna

Una volta completata la nostra riga, siamo pronti per aggiungere una maschera di sfondo con effetti di scorrimento alla colonna della stessa riga. Per iniziare, aggiungiamo una maschera di sfondo.

Per fare ciò, apri l'impostazione della colonna. Sotto la scheda Maschera di sfondo, aggiorna quanto segue:

  • Maschera: Strato Blob
  • Colore: #ffffff
  • Trasformazione maschera: capovolgimento orizzontale, inversione

Aggiungi effetti di scorrimento alla colonna

Ora che la nostra maschera di sfondo è a posto, possiamo aggiungere effetti di scorrimento alla colonna. Tieni presente che la colonna ha già effetti di scorrimento ereditati dalla riga madre. 

Tutto quello che faremo è ruotare la colonna nella direzione opposta della riga per ottenere una maggiore separazione della maschera e del motivo per la durata dello scorrimento.

Vai alla scheda Tecnologia. Sotto opzioni Effetti di scorrimento, seleziona la scheda Rotating e aggiornare quanto segue:

  • Abilita rotazione: SI
  • Rotazione iniziale: -15 gradi (a 0%)
  • Rotazione media: 0 gradi (dal 40% al 60%)
  • Rotazione finale: 15 gradi (al 100%)

Nascondi l'overflow della sezione

Attualmente, la linea rimane visibile ogni volta che lo scorrimento fa sì che si estenda oltre la sezione.

sfondo animato Divi durante lo scorrimento della pagina grazie a maschere e motivi

Per ripulire questo, dobbiamo nascondere l'overflow della sezione. Per fare ciò, apri la sezione impostazioni. Sotto la scheda Tecnologia, aggiorna le opzioni di visibilità come segue:

  • Overflow orizzontale: nascosto
  • Overflow verticale: nascosto

Ora sembra migliore.

sfondo animato Divi durante lo scorrimento della pagina grazie a maschere e motivi

Guarda anche: Divi: 12 combinazioni di maschere e motivi di sfondo

Aggiunta di contenuto alla linea creata per questo scopo

A questo punto, la maschera di sfondo e l'animazione di scorrimento del motivo sono complete. Tutto quello che dobbiamo fare è aggiungere il contenuto che vogliamo alla riga che abbiamo creato in precedenza per il contenuto.

Per questo esempio, abbiamo aggiunto un titolo fittizio in modo da poter vedere come apparirà l'animazione di sfondo con il testo statico.

progettare uno sfondo Divi animato durante lo scorrimento della pagina utilizzando maschere e motivi

Risultato finale

Diamo un'occhiata al risultato finale del nostro progetto.

sfondo animato Divi durante lo scorrimento della pagina grazie a maschere e motivi

Scarica DIVI ora!!!

Conclusione

È incredibile quanto sia facile creare sfondi così belli con le opzioni di sfondo di Divi. Inoltre, l'aggiunta di animazioni con gli effetti di scorrimento di Divi porta nuova vita a questi design.

Per un aspetto diverso, puoi provare diverse maschere e motivi su ogni livello. Se vuoi più ispirazione su come utilizzare il maschere e modelli sfondo, dai un'occhiata a questi 12 combinazioni di maschere e motivi di sfondo

Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.

Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet.

Non esitate a consultare anche la nostra guida sul Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.

...