Se stai cercando un modo per creare animazioni fluide con gli effetti di scorrimento integrati di Divi, adorerai questo tutorial. Ti mostreremo come combinare lo snap di scorrimento con gli effetti di movimento integrati di Divi per creare sezioni a tutta altezza che puoi scorrere in una volta sola.
Inizieremo creando la prima sezione. Riutilizzeremo quindi questa sezione in tutto il design della nostra pagina. Per abilitare lo snap a scorrimento, utilizzeremo le proprietà di snap a scorrimento CSS che assegneremo alle sezioni, HTML, intestazione e piè di pagina della nostra pagina.
Possibile risultato
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di dimensioni diverse.
1. Crea una nuova pagina e inizia a progettare la prima sezione
Aggiungi una nuova pagina e passa a Visual Builder
Inizia aggiungendo una nuova pagina. Immettere il titolo della pagina, pubblicare la pagina e passare a Visual Builder.
Impostazioni della sezione
dimensionamento
Una volta all'interno della nuova pagina, apri la sezione già presente e modifica le impostazioni di dimensionamento.
- Altezza minima: 100 Vh
Elemento principale
Aggiungiamo anche due righe di codice CSS alla sezione. Queste righe di codice CSS ci aiuteranno a trasformare la sezione in un punto di aggancio per lo snap di scorrimento.
scroll-snap-align: start; scroll-snap-stop: normale;
visibilità
Per accertarci che nulla vada oltre il contenitore della sezione, nasconderemo gli overflow della sezione.
- Straripamento orizzontale: nascosto
- Straripamento verticale: nascosto
Aggiungi riga n. 1
Struttura a colonne
Continua ad aggiungere una nuova riga alla sezione utilizzando la seguente struttura di colonne:
dimensionamento
Senza aggiungere ancora moduli, apri le impostazioni della riga e modifica il dimensionamento come segue:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza della grondaia: 1
- Larghezza: 100%
- Larghezza massima: 100%
Spaziatura
Stiamo rimuovendo anche l'imbottitura superiore e inferiore predefinita della sezione.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Posizione
E riposizioneremo la riga di conseguenza:
- Posizione: assoluta
- Posizione: centro inferiore
Aggiungi modulo di testo alla colonna
Lascia vuota la casella del contenuto
L'unico modulo di cui abbiamo bisogno in questa riga è un modulo di testo. Assicurati di lasciare vuota la casella del contenuto del modulo.
Colore di sfondo
Quindi, cambia il colore di sfondo.
- Colore di sfondo: # ffee00
Impostazioni di testo
Rimuoveremo anche l'altezza della riga di testo del modulo.
- Altezza della riga di testo: 1em
dimensionamento
Quindi, andremo alle impostazioni di dimensionamento e cambieremo la larghezza.
- Larghezza: 30%
Spaziatura
Trasformeremo il modulo in un quadrato aggiungendo anche un po 'di imbottitura superiore.
- Imbottitura superiore: 30%
Aggiungi riga n. 2
Struttura della colonna
Nella riga successiva. Utilizza la seguente struttura di colonne:
dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento nella scheda di progettazione:
- Usa una larghezza della grondaia personalizzata: Sì
- Larghezza della grondaia: 1
- Larghezza: 60vw
- Larghezza massima: 100%
spaziatura
Quindi aggiungi un margine superiore personalizzato su diverse dimensioni dello schermo.
- Margine superiore: 20vh (desktop), 5vw (tablet e telefono)
Spaziatura colonna 2
Quindi apriremo le impostazioni nella colonna 2 e aggiungeremo valori di riempimento personalizzati.
- Imbottitura superiore: 2vh (tablet e telefono)
- Imbottitura sinistra: 2vw
- Imbottitura destra: 2vw
Aggiungi un modulo immagine alla colonna 1
Carica immagine
È ora di aggiungere mod, aggiungere una mod immagine alla colonna 1 e caricare un'immagine a tua scelta.
dimensionamento
Forzeremo quindi l'intera larghezza sul modulo.
- Forza larghezza intera: Sì
Aggiungi il modulo di testo # 1 alla colonna 2
Aggiungi contenuto H2
Nella seconda colonna, il primo modulo di cui abbiamo bisogno è un modulo di testo con contenuto H2.
Impostazioni di testo H2
Vai alla scheda di progettazione del modulo e modifica le impostazioni del testo H2 come segue:
- Titolo rubrica 2: Anton
- Voce 2 Dimensioni del testo: 5vw (desktop), 7vw (tablet), 9vw (telefono)
Aggiungi il modulo di testo # 2 alla colonna 2
Aggiungi contenuto
Aggiungi un altro modulo di testo appena sotto appena sotto quello precedente e inserisci il file contenuto della descrizione da te scelta.
Impostazioni del testo
Modificare le impostazioni di testo del modulo come segue:
- Carattere di testo: Apri Sans
- Dimensioni del testo: 0.8vw (desktop), 2vw (tablet), 2.5vw (telefono)
- Altezza della riga di testo: 1,8 em
spaziatura
E aggiungi il margine superiore e inferiore personalizzato alle impostazioni di spaziatura.
- Margine superiore: 2vw
- Margine inferiore: 2vw
Aggiungi un modulo pulsanti alla colonna 2
Aggiungi una copia
Il prossimo e ultimo modulo di cui abbiamo bisogno in questa colonna è un modulo pulsante. Aggiungi una copia a tua scelta.
Impostazioni dei pulsanti
Modella il pulsante di conseguenza:
- Usa stili personalizzati per il pulsante: Sì
- Dimensione testo pulsante: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Colore testo pulsante: # 333333
- Colore bordo pulsante: # 333333
- Raggio pulsante: 1px
- Carattere pulsante: Anton
- Stile carattere pulsante: maiuscolo
spaziatura
E completa le impostazioni del modulo aggiungendo un valore personalizzato basato sulle dimensioni dello schermo.
- Alto margine interno: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Margine interno basso: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Margine interno sinistro: 3vw (desktop), 5vw (tablet), 7vw (telefono)
- Margine Internet corretto: 3vw (desktop), 5vw (tablet), 7vw (telefono)
2. Aggiungi effetti di scorrimento a diversi elementi
Modulo di testo nella riga n. 1
Animazione verticale
Una volta che tutti gli elementi sono a posto, è il momento di aggiungere gli effetti di scorrimento. Apri il Modulo di testo nella prima riga e usa un movimento verticale.
- Abilita movimento verticale: Sì
- Offset iniziale: 4
- Offset medio: 0
- Offset finale: -4
- Trigger effetto movimento: metà dell'elemento
Linea 2
Colonna 1
Animazione orizzontale
Quindi apri la prima colonna della seconda riga e aggiungi un movimento orizzontale.
- Attiva movimento orizzontale: Sì
- Avvia offset: -3
- Offset medio: 0 (dal 40% al 60%)
- Fine offset: -3
- Attivare l'effetto di movimento: metà dell'elemento
Dissolvenza in entrata e in uscita
Applichiamo anche un effetto di dissolvenza in entrata e in uscita alla stessa colonna.
- Attiva dissolvenza in entrata e in uscita: Sì
- Opacità iniziale: 0%
- Opacità media: 100%
- Opacità finale: 100%
- Attivare l'effetto di movimento: metà dell'elemento
Colonna 2
Movimento orizzontale
Quindi apriremo i parametri della seconda colonna e applicheremo i seguenti parametri di movimento orizzontale:
- Attiva movimento orizzontale: Sì
- Avvia offset: 3
- Offset medio: 0 (dal 40% al 60%)
- Scostamento finale: 3
- Attivare l'effetto di movimento: metà dell'elemento
Dissolvenza in entrata e in uscita
Con un effetto di dissolvenza in entrata e in uscita.
- Attiva dissolvenza in entrata e in uscita: Sì
- Opacità iniziale: 0%
- Opacità media: 100%
- Opacità finale: 100%
- Attivare l'effetto di movimento: metà dell'elemento
4. Riutilizzare la prima sezione
Clona la sezione quattro volte
Una volta completata la prima sezione e i suoi effetti di scorrimento, puoi clonarla tutte le volte che vuoi.
Cambia i colori di sfondo di tutte le altre sezioni
Cambieremo il colore di sfondo di tutte le altre sezioni.
- Colore di sfondo: # 111111
5. Aggiungi codice CSS per abilitare l'acquisizione a scorrimento sull'HTML della pagina
Aggiungi un modulo di codice all'ultima sezione della pagina
Ora per abilitare l'acquisizione a scorrimento sull'HTML della nostra pagina, aggiungeremo un modulo di codice ovunque nell'ultima sezione della nostra pagina.
Inserisci il codice CSS HTML
Queste righe di codice CSS ci aiuteranno ad applicare l'allineamento dello scorrimento al codice HTML della nostra pagina:
<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>
Aggiungi Scroll Snapping Start a Intestazione e Piè di pagina
Faremo in modo che la nostra intestazione e piè di pagina siano anche punti di acquisizione dello scorrimento (proprio come le nostre sezioni) aggiungendo anche le seguenti righe di codice CSS:
intestazione, piè di pagina {scroll-snap-align: start;}
to Finish
In questo articolo, ti abbiamo mostrato come creare animazioni fluide combinando lo snap a scorrimento con gli effetti di movimento incorporati di Divi. Questo è un ottimo modo per attivare gli effetti di scorrimento con un solo scorrimento.
La cattura dello scorrimento aiuta Visitatori per sfogliare senza sforzo le diverse parti del tuo sito web. Lo abbiamo combinato con un design della sezione a tutta altezza. Sei stato anche in grado di scaricare gratuitamente il file JSON! Se hai domande o suggerimenti, sentiti libero di lasciare un commento nella sezione commenti qui sotto.
