Come riavviare un'animazione ogni volta che si scorre oltre un elemento con Divi e GSAP

Quando si tratta di animare elementi sulla tua pagina, molto probabilmente vorrai attivare l'animazione di un elemento una volta che entra nel viewport. Con le impostazioni di animazione integrate di Divi, non appena quell'elemento è stato visualizzato ed è stato animato, rimarrà statico fino a quando non ricarichi l'intera pagina. In alcuni casi, potresti cercare un approccio più coerente, in cui l'animazione si riavvia con ogni voce della finestra. Ciò ti aiuterà a ottimizzare l'esperienza che i visitatori hanno sul tuo sito web. In questo tutorial, ti mostreremo esattamente come farlo utilizzando Divi, GSAP e ScrollTrigger per GSAP. Una volta ottenuto l'approccio, sarai in grado di applicarlo a qualsiasi elemento della tua pagina. Potrai anche scaricare gratuitamente il file JSON!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica il layout GRATUITAMENTE

Per mettere le mani sul layout gratuito, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

1. Crea un progetto di sezione

Aggiungi sezione segnaposto

Prima di iniziare a creare il design, aggiungeremo due sezioni segnaposto alla pagina su cui stiamo lavorando. In questo modo, possiamo vedere l'esperienza di scorrimento una volta terminato il design. In alternativa, puoi utilizzare il design all'interno di una pagina che hai già impostato. Aggiungi una nuova sezione regolare.

Dimensionamento

Modificare l'altezza della sezione come segue:

• Altezza: 100vh

Clona sezione segnaposto

Quindi, clona la sezione una volta.

Aggiungi una nuova sezione tra le sezioni segnaposto

Per creare il design che hai potuto vedere nell'anteprima di questo post, aggiungeremo una nuova sezione normale tra le sezioni segnaposto.

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza ancora aggiungere moduli, apri le impostazioni della riga, vai alla scheda design e modifica le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 2
• Larghezza: 90%
• Larghezza massima: 2080 px

Aggiungi il modulo di testo n. 1 alla colonna

Aggiungi contenuto

Quindi, aggiungi un primo modulo di testo alla colonna e includi alcuni contenuti a tua scelta.

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Montserrat
• Peso del carattere del testo: pesante
• Stile del carattere del testo: maiuscolo
• Colore del testo: #f9f9f9
• Dimensione del testo:
  • Desktop: 150 px
  • Tablet e telefono: 11vw
• Altezza riga di testo: 1.1em
• Allineamento del testo: Centro

Aggiungi il modulo di testo n. 2 alla colonna

Aggiungi contenuto H2

Aggiungi un altro modulo di testo sotto il precedente e includi alcuni contenuti H2.

Impostazioni testo H2

Disegna il testo H2 come segue:

• Intestazione 2 Carattere: Montserrat
• Intestazione 2 Allineamento del testo: Centro
• Intestazione 2 Dimensione del testo:
  • Desktop: 80 pixel
  • Tablet e telefono: 10vw

Dimensionamento

Aggiungi anche una larghezza del 100%.

• Larghezza: 100%

Posizione

E riposiziona l'intero modulo nella scheda Avanzate.

• Posizione: Assoluta
• Posizione: Centro

Aggiungi riga #2

Struttura della colonna

Aggiungi un'altra riga sotto la precedente, utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora moduli, apri le impostazioni di riga e regola le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 2
• Larghezza: 90%
• Larghezza massima: 2080 px

Impostazioni colonna 1

Quindi, apri le impostazioni della colonna 1.

Immagine di sfondo

Carica un'immagine di sfondo a tua scelta.

• Dimensione immagine di sfondo: copertina
• Posizione immagine di sfondo: Centro

Spaziatura

Modifica successivamente le impostazioni di spaziatura della colonna.

• Imbottitura superiore: 100 px
• Imbottitura inferiore:
  • Desktop: 400 px
  • Tablet e telefono: 200 px
• Imbottitura sinistra: 5,5%
• Imbottitura destra: 5,5%

Aggiungi il modulo di testo n. 1 alla colonna 1

Aggiungi contenuto H4

Quindi, aggiungi un modulo di testo alla colonna 1 con alcuni contenuti H4.

Impostazioni testo H4

Modella il testo H4 di conseguenza:

• Intestazione 4 Carattere: Lato
• Intestazione 4 Peso del carattere: pesante
• Intestazione 4 Stile carattere: maiuscolo
• Intestazione 4 Dimensioni del testo: 13 px
• Intestazione 4 Spaziatura lettere: 2px

Aggiungi il modulo di testo n. 2 alla colonna 1

Aggiungi contenuto H3

Aggiungi un altro modulo di testo sotto il precedente, utilizzando alcuni contenuti H3.

Impostazioni testo H3

Modificare le impostazioni del testo H3 di conseguenza:

• Intestazione 3 Carattere: Montserrat
• Intestazione 3 Dimensione testo: 36px
• Intestazione 3 Spaziatura lettere: 1px
• Intestazione 3 Altezza riga: 1.2em

Aggiungi il modulo di testo n. 3 alla colonna 1

Aggiungi descrizione contenuto

Aggiungi l'ultimo modulo di testo contenente alcuni contenuti descrittivi a tua scelta.

Impostazioni testo

Modificare le impostazioni del testo del modulo come segue:

• Carattere del testo: Lato
• Colore del testo: #4c4c4c
• Spaziatura delle lettere del testo: 0,5 px
• Altezza riga di testo: 2em

Aggiungi modulo pulsante alla colonna 1

Aggiungi copia

L'ultimo modulo di cui abbiamo bisogno in questa colonna è un modulo pulsante. Aggiungi una copia a tua scelta.

Impostazioni dei pulsanti

Stile il pulsante nella scheda design.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 14px
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #000000
• Larghezza bordo pulsante: 0px

• Carattere pulsante: Lato
• Peso del carattere del pulsante: grassetto
• Stile carattere pulsante: maiuscolo

Riutilizza colonna 1

Elimina colonna 2 e 3

Una volta completata la colonna 1 e tutti i moduli al suo interno, puoi eliminare le due colonne rimanenti della riga.

Clona colonna 1 due volte

E riutilizza la colonna 1 clonandola due volte.

Cambia le immagini di sfondo delle colonne duplicate

Assicurati di cambiare l'immagine di sfondo di ogni colonna duplicata.

Modifica contenuto in colonne duplicate

Insieme al contenuto del modulo.

Aggiungi Trasforma Traduci in Impostazioni colonna 2

Quindi, apri le impostazioni della colonna 2 e vai alla scheda Design. Una volta lì, aggiungi alcuni valori di traduzione di trasformazione su diverse dimensioni dello schermo per completare il design.

• Sinistra:
  • Desktop: 50 pixel
  • Tablet e telefono: 0px

2. Applicare la tecnica di animazione di riavvio alla progettazione

Aggiungi la classe CSS alla riga n. 2

Ora che il nostro design è a posto, possiamo concentrarci sulla tecnica di animazione del riavvio. Per fare questo, prenderemo di mira più moduli contemporaneamente. Innanzitutto, apri le impostazioni della seconda riga e applica la seguente classe CSS:

• Classe CSS: trigger-animazione-row

Aggiungi modulo codice alla riga n. 1

La classe CSS che abbiamo aggiunto nel passaggio precedente di questo tutorial ci aiuterà a indirizzare contemporaneamente tutti i moduli all'interno di questa riga. Per creare l'animazione di riavvio, utilizziamo del codice JQuery, la libreria JavaScript GSAP e la libreria ScrollTrigger per GSAP. Per aggiungere questo codice, inseriremo un nuovo modulo di codice sotto il secondo modulo di testo nella riga n. 1.

Aggiungi librerie GSAP e ScrollTrigger

Assicurati di aggiungere le librerie GSAP e ScrollTrigger all'interno di nuovi tag di script.

• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

Aggiungi nuovi tag di script

Quindi, aggiungi nuovi tag di script sotto i tag di script della libreria.

Aggiungi GSAP + Funzione ScrollTrigger

All'interno dei nuovi tag di script, copieremo e incolleremo le seguenti righe di codice JQuery:

jQuery(document).ready(function($){

var $module = $('.trigger-animation-row .et_pb_module');

$module.each(function(){
var $thisModule = $(this);

gsap.from($thisModule[0], {
scrollTrigger: {
trigger: this,
start: "bottom bottom",
end: "center top",
scrub: false,
repeat: -1,
toggleActions:'restart none none reset'
},
opacity: 0,
x: -100,
scale: 1.1,
duration: 2,
ease: "back"
});
});
});

Questo codice avrà come target tutti i moduli di riga contemporaneamente e riavvierà l'animazione non appena un visitatore entrerà di nuovo nell'area visibile. L'animazione, in questo caso, è piuttosto semplice e minimale. Tuttavia, con GSAP e ScrollTrigger, puoi creare qualsiasi tipo di animazione che desideri, quindi vale sicuramente la pena esaminarlo!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come riavviare un'animazione non appena l'elemento entra nella finestra. Questo approccio ti aiuta a creare un'esperienza coerente, indipendentemente da come i tuoi visitatori scorrono. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.