Come scorrere automaticamente in orizzontale durante lo scorrimento in verticale con Divi e GSAP
Pubblicato: 2021-03-17Più esplori i siti Web sul Web, più ti imbatti in esperienze on-page davvero personalizzate. Potresti esserti chiesto come ottenere determinate funzionalità avanzate e la risposta è spesso questa: utilizzando una libreria JavaScript di animazione. Una popolare libreria di animazione al giorno d'oggi è GSAP. Ma solo perché vuoi usare una libreria JavaScript per qualcosa, non significa che devi passare manualmente anche alla parte HTML e CSS. Divi può occuparsi della maggior parte del tuo processo di web design; costruzione e progettazione, il che ti lascia più tempo per concentrarti su funzionalità e animazioni personalizzate. Nel tutorial di oggi, ad esempio, ti mostreremo come scorrere in orizzontale quando in realtà si scorre in verticale utilizzando Divi e GSAP. Ciò si traduce in un effetto di animazione avanzato che puoi personalizzare come preferisci. 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 scaricarli 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 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.
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!
Panoramica dell'approccio
Cosa stiamo usando
- Divi
- Libreria JavaScript GSAP
- Plugin ScrollTrigger per GSAP
- Demo ScrollTrigger
Cosa stiamo creando
- Scorrimento orizzontale falso durante lo scorrimento verticale
- Effetto spillo
- Far funzionare l'effetto su un numero di sezioni a nostra scelta (non necessariamente l'intera pagina)
- Un'esperienza dello schermo orizzontale senza sforzo su tutte le dimensioni dello schermo
1. Aggiungi sezioni segnaposto
Aggiungi la sezione n. 1
Inizia aggiungendo una prima sezione alla pagina su cui stai lavorando. Questa sezione fungerà da segnaposto in modo da poter osservare l'effetto che si verifica.
Dimensionamento
Apri le impostazioni della sezione e assegna un'altezza alle impostazioni di dimensionamento.
- Altezza: 60vh
Clona Sezione #1
Quindi, clona la sezione segnaposto una volta. Questo ci aiuterà a generare un po' di spazio nella parte superiore e inferiore della nostra pagina, senza che faccia parte dello scorrimento orizzontale (vedi anteprima).
1. Costruisci il design della sezione
Aggiungi una nuova sezione tra le sezioni
Ora che abbiamo le due sezioni segnaposto a posto, è il momento di creare la prima sezione che useremo all'interno del nostro scorrimento orizzontale. Aggiungi questa sezione proprio tra le due sezioni segnaposto.
Dimensionamento
Apri le impostazioni della sezione e assegna un'altezza massima nelle impostazioni di dimensionamento.
- Altezza massima: 100 vh
straripamenti
Stiamo anche impostando l'overflow verticale su automatico. Questo, in combinazione con l'altezza massima nel passaggio precedente, ci aiuterà a generare automaticamente una barra di scorrimento su determinate dimensioni dello schermo in cui gli elementi della sezione superano l'altezza della finestra.
- Overflow verticale: automatico
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Immagine di sfondo
Senza aggiungere ancora moduli, apri le impostazioni della riga e usa un'immagine di sfondo.
- Dimensione immagine di sfondo: copertina
- Posizione immagine di sfondo: Centro
Dimensionamento
Modificare le impostazioni di dimensionamento della riga successiva.
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Larghezza:
- Desktop: 70%
- Tablet e telefono: 80%
Spaziatura
Insieme alle impostazioni di spaziatura.
- Imbottitura superiore:
- Desktop: 30vh
- Tablet e telefono: 20 vh
- Imbottitura inferiore: 0px
Impostazioni colonna
Quindi, apri le impostazioni della colonna.
Colore di sfondo
Usa un colore di sfondo bianco per la colonna.
- Colore di sfondo: #ffffff
Spaziatura
Passa alla scheda di progettazione della colonna e applica alcuni valori di riempimento personalizzati.
- Imbottitura superiore: 5%
- Imbottitura inferiore: 5%
- Imbottitura sinistra: 5%
- Imbottitura destra: 5%
Frontiera
Usa anche un bordo.
- Larghezza bordo: 1px
- Colore bordo: #000000
Aggiungi il modulo di testo n. 1 alla colonna
Aggiungi contenuto H4
È ora di aggiungere moduli, iniziando con un primo modulo di testo contenente alcuni contenuti H4.
Impostazioni testo H4
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H4 come segue:
- Intestazione 4: Font: codice sorgente Pro
- Colore testo titolo 4: #000000
- Intestazione 4 Dimensione del testo:
- Desktop: 1.2vw
- Tablet: 2.5vw
- Telefono: 3.5vw
- Intestazione 4 Spaziatura lettere: 1px
Aggiungi il modulo di testo n. 2 alla colonna
Aggiungi contenuto H3
Aggiungi un altro modulo di testo proprio sotto il precedente e usa alcuni contenuti H3 nella casella del contenuto.
Impostazioni testo H3
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H3 di conseguenza:
- Intestazione 3 Carattere: Alata
- Intestazione 3 Dimensione del testo:
- Desktop: 2.5vw
- Tablet: 4vw
- Telefono: 7vw
Aggiungi il modulo di testo n. 3 alla colonna
Aggiungi contenuto
Aggiungi un ultimo modulo di testo alla colonna con un contenuto descrittivo a tua scelta.
Impostazioni testo
Modifica di conseguenza le impostazioni del testo del modulo:
- Carattere del testo: codice sorgente Pro
- Dimensione del testo:
- Desktop: 0.8vw
- Tablet: 2vw
- Telefono: 3vw
- Altezza riga di testo: 1,5 em
Dimensionamento
Modificare le impostazioni di dimensionamento successivo.
- Larghezza:
- Desktop: 67%
- Tablet e telefono: 100%
Spaziatura
E completa le impostazioni del modulo applicando alcuni valori di riempimento reattivo alle impostazioni di spaziatura.
- Imbottitura superiore:
- Desktop: 3vh
- Tablet e telefono: 5vh
- Imbottitura inferiore:
- Desktop: 3vh
- Tablet e telefono: 5vh
Aggiungi modulo pulsante alla colonna
Aggiungi copia
L'ultimo modulo di cui abbiamo bisogno per completare il design della riga è un modulo pulsante. Aggiungi 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 pulsante: Sì
- Dimensione del testo del pulsante:
- Desktop: 0.8vw
- Tablet: 2vw
- Telefono: 3vw
- Colore del testo del pulsante: #ffffff
- Colore di sfondo del pulsante: #000000
- Larghezza bordo pulsante: 0px
- Raggio bordo pulsante: 0px
- Carattere pulsante: codice sorgente Pro
- Stile carattere pulsante: maiuscolo
Spaziatura
Aggiungi successivamente alcuni valori di riempimento personalizzati.
- Imbottitura superiore: 15px
- Imbottitura inferiore: 15px
- Imbottitura sinistra: 50 px
- Imbottitura destra: 50px
Posizione
E riposiziona il modulo nella scheda Avanzate.
- Posizione: Assoluta
- Posizione: angolo in basso a sinistra
- Scostamento verticale: -5%
- Scostamento orizzontale: 5%
2. Sezione Riutilizzo
Clona sezione due volte
Una volta completata la prima sezione, puoi clonarla due volte.
Cambia immagine e copia e link
Assicurati di cambiare l'immagine, copiare e collegare in ogni sezione duplicata.
2. Aggiungi funzionalità
Aggiungi la classe CSS a ogni sezione che desideri includere nello scorrimento orizzontale
Ora che abbiamo tutti gli elementi a posto, possiamo iniziare a concentrarci sulla funzionalità di tutto. Il primo passo per ottenere il risultato è assegnare una classe CSS personalizzata a ciascuna sezione che si desidera far parte dello scorrimento orizzontale. In questo caso, ciò significa le tre sezioni tra le sezioni segnaposto.
- Classe CSS: sezione orizzontale
Aggiungi nuovo modulo di codice da qualche parte all'interno della pagina
Quindi, aggiungi un modulo di codice alla pagina. Questo può essere ovunque tu voglia.
Aggiungi prima le librerie GSAP e ScrollTrigger
Copia e incolla le librerie GSAP e ScrollTrigger all'interno del modulo di codice. Usa i tag di script per questo con le seguenti fonti:
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"
Aggiungi nuovi tag script per codice personalizzato
Proprio sotto i tag di script della libreria, aggiungeremo alcuni nuovi tag di script.
Aggiungi codice JS
Preparati per l'utilizzo di JQuery
All'interno di questi tag di script, inizieremo caricando JQuery.
jQuery(document).ready(function($){
});
Registra il plugin ScrollTrigger
Quindi, registreremo il plugin ScrollTrigger.
gsap.registerPlugin(ScrollTrigger);
Avvolgi tutte le sezioni pertinenti in un nuovo div
Stiamo anche inserendo ciascuna delle sezioni rilevanti all'interno di un nuovo div utilizzando le seguenti righe di codice:
var allSections = $('.horizontal-section');
allSections.wrapAll('<div class="horizontal-container"/>'); 
Crea una nuova interpolazione GSAP con ScrollTrigger
Per far funzionare il falso scorrimento orizzontale, utilizzeremo una nuova interpolazione con un trigger di scorrimento. Il codice che fa sì che ciò accada è il seguente:
gsap.to(allSections, {
xPercent: -100 * (allSections.length - 1),
ease: "none",
scrollTrigger: {
trigger: ".horizontal-container",
pin: true,
start: "top top",
scrub: 1,
snap: false,
// base vertical scrolling on how wide the container is so it feels more natural.
end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth
}
});
Aggiungi tag di stile per codice CSS personalizzato
Successivamente, aggiungeremo alcuni tag di stile al nostro modulo di codice.
Inserisci codice CSS tra i tag di stile
E completeremo il tutorial e la funzionalità aggiungendo le seguenti righe di codice CSS tra i tag di stile:
.horizontal-container {
width: 300%;
height: 100%;
display: flex;
flex-wrap: nowrap;
max-width: none;
}
#page-container {
overflow: hidden;
}
.horizontal-section {
width: 100%;
will-change: transform;
}
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 fare il possibile per il tuo sito web con Divi e GSAP. Più specificamente, ti abbiamo mostrato come scorrere orizzontalmente quando in realtà scorri verticalmente sulla tua pagina. Questo è un tipo di animazione personalizzato che potresti aver incontrato a un certo punto e ti sei chiesto come potresti farlo con DIvi. 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.