Come aggiungere un effetto di scorrimento verso il basso per visualizzare in anteprima i progetti di pagine Web in Divi

Che si tratti di una pagina di portfolio o di una galleria di immagini, i web designer devono mostrare i loro progetti ai clienti come parte cruciale della guida del business. E, molte volte, questi esempi del loro lavoro includono immagini di interi progetti di pagine web che possono occupare molto spazio. Ecco perché l'aggiunta di un effetto di scorrimento verso il basso a queste immagini può distinguere il tuo portfolio. Ciò consente all'utente di vedere inizialmente una parte compatta del design. Ma quando l'utente passa sopra l'immagine, l'immagine scorre per rivelare lentamente il resto del design come se stesse scorrendo una pagina web. Puoi vedere questo tipo di effetto utilizzato sulla nostra pagina Divi Layout Packs.

In questo tutorial, ti mostrerò come utilizzare Divi per aggiungere un effetto di scorrimento verso il basso alle immagini che consentirà agli utenti di visualizzare in anteprima i progetti di pagine Web. Questo è un elegante elemento interattivo che penso ti piacerà.

Sbirciata

Ecco un'anteprima dell'effetto di scorrimento verso il basso che creeremo insieme in questo tutorial.

Scarica GRATUITAMENTE il layout dell'effetto al passaggio del mouse di scorrimento verso il basso

Per mettere le mani su questi esempi di disegni di effetti al passaggio del mouse scorri verso il basso, devi 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 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!

Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.

Ora passiamo al tutorial, vero?

Cosa ti serve per iniziare

Per questo tutorial sui casi d'uso, costruiremo il nostro design da zero usando Divi. Avrai anche bisogno di alcune immagini/screenshot da utilizzare per gli elementi del portfolio. Suggerirei di utilizzare immagini di almeno 1080px di larghezza.

Creazione della riga a tre colonne

Se non l'hai già fatto, crea una nuova pagina. Quindi dai un titolo alla tua pagina e distribuisci il generatore Divi sul front-end. Quindi crea una nuova sezione con una riga a tre colonne.

Aggiorna le impostazioni della riga come segue:

Larghezza personalizzata: 100%
Imbottitura personalizzata (desktop): 5% a sinistra, 5% a destra
Imbottitura personalizzata (tablet): 25% a sinistra, 25% a destra
Imbottitura personalizzata (telefono): 15% a sinistra, 15% a destra

Successivamente, dobbiamo aggiungere i seguenti frammenti CSS personalizzati a ciascuno degli elementi principali della colonna. Nella scheda Avanzate, aggiungi il seguente CSS:

Colonna 1 Elemento principale CSS:

overflow: hidden;
height: 400px;

Colonna 2 Elemento principale CSS:

overflow: hidden;
height: 400px;

Colonna 3 Elemento principale CSS:

overflow: hidden;
height: 400px;

Notare che l'altezza di ciascuna delle colonne è 400 px. Questo servirà alla fine come altezza della finestra di visualizzazione dell'immagine che scorrerà al passaggio del mouse. La proprietà "overflow: nascosto" farà in modo che la parte dell'immagine che viene spostata all'esterno della colonna (al passaggio del mouse) rimanga nascosta. Questo dovrebbe avere più senso ogni volta che aggiungiamo l'effetto di trasformazione al passaggio del mouse all'immagine.

Creazione dell'immagine con l'effetto di scorrimento verso il basso

Ora siamo pronti per iniziare a creare la nostra immagine con l'effetto di scorrimento verso il basso. Questo è sorprendentemente semplice se capisci come funziona l'effetto. Fondamentalmente, tutto ciò che faremo è aggiungere un'immagine e quindi utilizzare la proprietà di trasformazione translate per spostare l'immagine verso l'alto del 100% al passaggio del mouse. Quindi, per assicurarci che l'immagine si fermi nella posizione corretta, dobbiamo aggiungere un margine superiore pari all'altezza della colonna al passaggio del mouse. Ciò assicurerà che l'immagine smetta di scorrere nel punto esatto in cui è visibile la parte inferiore dell'immagine.

Ecco come farlo.

Aggiungi un modulo immagine alla colonna 1. Quindi aggiungi le seguenti opzioni al passaggio del mouse:

Margine personalizzato (hover): 400px in alto
Trasforma Trasla asse Y (hover): -100%

Assicurati che il margine superiore personalizzato al passaggio del mouse sia uguale all'altezza data alla tua colonna nel CSS personalizzato sopra.

Inoltre, il valore dell'asse Y di conversione della trasformazione è una percentuale (-100%), non pixel, quindi sarà necessario inserirlo manualmente digitando il valore nella casella di input dei controlli di conversione della trasformazione.

Come funziona l'effetto di scorrimento verso il basso?

Potrebbe essere d'aiuto spiegare la funzionalità di questa configurazione con alcune illustrazioni visive. Supponiamo che l'immagine che stai utilizzando abbia un'altezza di 700 px. L'altezza della colonna è di soli 400 px. Ciò significa che per impostazione predefinita (prima del passaggio del mouse), l'overflow inferiore di quell'immagine verrà nascosto poiché si estende all'esterno della colonna.

Quando l'utente passa sopra l'immagine, accadono due cose.

Innanzitutto, la proprietà di traslazione di trasformazione sposta l'immagine verso l'alto con un valore dell'asse Y di -100%. In altre parole, l'immagine si sposta verso l'alto del 100% di qualunque sia l'altezza dell'immagine (700 px).

Successivamente, all'immagine viene assegnato un margine superiore di 400 px per riportare l'immagine nella finestra della colonna in modo che si trovi perfettamente nella parte inferiore.

Questo accade contemporaneamente all'effetto di trasformazione al passaggio del mouse, quindi il risultato è uno scorrimento uniforme che termina in un posizionamento perfetto.

Ecco come appare il risultato nell'esempio dal vivo.

Regolazione della durata della transizione e della curva di velocità

Come puoi vedere, la durata della transizione è troppo veloce per visualizzare l'anteprima dell'immagine al passaggio del mouse. Per rallentarlo, puoi aggiornare la durata della transizione. È inoltre possibile regolare la curva della velocità per modificare la velocità durante la durata.

Aggiorna quanto segue:

Durata della transizione: 4000 ms
Curva di velocità di transizione: facilità

In generale, vorrai aumentare la durata della transizione per le immagini con un'altezza maggiore per dare all'utente il tempo di elaborare l'immagine mentre si verifica l'effetto di scorrimento al passaggio del mouse.

Copia e incolla il modulo immagine nelle colonne rimanenti

Ora tutto ciò che devi fare è copiare il modulo immagine e incollarlo nella colonna 2 e nella colonna 3. Quindi aggiorna le immagini per ciascuna con la nuova immagine che desideri. Questo è tutto!

Aggiunta di un titolo sopra ogni immagine utilizzando un modulo di testo

Se desideri aggiungere un'intestazione a ciascuna delle tue immagini, puoi farlo utilizzando il modulo di testo. Tuttavia, dovremo apportare alcune modifiche al modulo testo e al modulo immagine per farlo funzionare.

Vai avanti e aggiungi un nuovo modulo di testo sopra l'immagine nella colonna 1. Sarai più facile usare la modalità di visualizzazione wireframe poiché la tua colonna è impostata su un'altezza di colonna.

Quindi aggiorna il contenuto con un'intestazione h2 come segue:

<h2>Homepage</h2>

Quindi aggiorna le impostazioni di progettazione come segue:

Colore di sfondo: #ffffff
Orientamento del testo: centro
Intestazione 2 Dimensioni del testo: 20 px
Intestazione 2 Altezza riga: 2em
Margine personalizzato: 0px in basso
Imbottitura personalizzata: 10px in alto
Box Shadow: vedi screenshot

Queste impostazioni possono sembrare arbitrarie, ma non lo sono. Questi valori possono prevedere quale sarà l'altezza del modulo di testo che è importante sapere per dopo. Ad esempio, so che il modulo di testo avrà un'altezza di 60 px. facciamo i conti...

L'altezza della linea è 2em che è 2 volte la dimensione del testo dell'intestazione 2 (20px). Ciò significa che l'altezza della mia linea sarà di 40 px.

Il riempimento superiore personalizzato è impostato su 10 px. E c'è un'imbottitura inferiore nascosta di 10px che esiste già per tutte le intestazioni per impostazione predefinita in Divi. L'imbottitura superiore e inferiore si combinano per 20 px di altezza aggiuntiva.

Quindi... 40px (di altezza della linea) + 20px (di padding) = 60px

Ora conosciamo l'altezza del modulo di testo. Ovviamente, puoi sempre ispezionare l'elemento usando gli strumenti di sviluppo solo per essere sicuro.

Il margine inferiore personalizzato di 0 px è necessario per eliminare il margine predefinito che esiste sotto il modulo (aggiunto dalla larghezza della grondaia).

Poiché ci sarà una certa sovrapposizione dell'immagine con il modulo di testo al passaggio del mouse, dobbiamo assicurarci che il modulo di testo rimanga a strati sopra l'immagine. Possiamo farlo assegnando al modulo di testo una posizione relativa e modificando il valore z-index come segue:

Aggiungi il seguente CSS personalizzato all'elemento principale:

position:relative;

Quindi aggiorna l'indice z:

Indice Z: 3

Copia e incolla il modulo di testo

Ora che l'intestazione del testo è terminata, possiamo copiarla e incollarla (usando la modalità di visualizzazione wireframe) sopra le immagini nelle colonne 2 e 3.

Quindi tutto ciò che devi fare è aggiornare il contenuto per ciascuno.

Aggiorna il valore del margine superiore al passaggio del mouse per ogni immagine in modo che si adatti all'altezza del modulo di testo

Attualmente, ciascuna delle immagini nelle colonne 1, 2 e 3 ha un margine superiore personalizzato di 400 px al passaggio del mouse. Questo è stato impostato per essere uguale all'altezza dell'altezza personalizzata della colonna. Tuttavia, poiché il modulo di testo ora occupa parte dello spazio della colonna (un'altezza di 60 px), è necessario regolare il valore del margine superiore al passaggio del mouse.

Per fare ciò, usa la funzione di selezione multipla per selezionare tutte e tre le immagini. Quindi aggiorna le impostazioni dell'elemento come segue:

Margine personalizzato (hover): 340px in alto

Ora le tue immagini si fermeranno perfettamente nella parte inferiore della colonna alla fine dello stato al passaggio del mouse.

Risultato finale

Ecco il risultato finale del progetto.

Sentiti libero di duplicare la riga e aggiornare le immagini e il testo dell'intestazione secondo necessità per più visualizzazioni del portfolio.

Ecco come appare su tablet e telefono.

Pensieri finali

Mostrare i progetti della tua pagina web con un effetto di scorrimento verso il basso personalizzato non solo aggiunge un'interazione davvero interessante, ma consente anche di risparmiare molto spazio. Ciò consente di visualizzare molte immagini in un layout compatto e simmetrico. Questo tipo di funzionalità è solitamente qualcosa che otterremmo con un plugin. Tuttavia, con Divi, hai il controllo completo sul design e sulla funzionalità senza dover aggiungere un altro plug-in. Spero che questo ti ispiri a creare bellissime gallerie di portfolio per il tuo prossimo progetto.

Non vedo l'ora di sentirti nei commenti.

Saluti!