Come combinare gli effetti al passaggio del mouse con gli sfondi di parallasse CSS in Divi
Pubblicato: 2019-08-30L'utilizzo di CSS Parallax con immagini di sfondo in Divi ci consente di creare effetti al passaggio del mouse sorprendentemente unici. Il parallasse è uno dei tanti modi in cui possiamo dare vita ai nostri siti web. E quando combiniamo la parallasse con la vasta gamma di opzioni di hover di Divi, diamo ancora più vita ai contenuti.
In questo tutorial, ti mostreremo che puoi progettare in modo rapido e semplice effetti di hover di sfondo di parallasse CSS unici in Divi. Nessun plug-in o codice personalizzato necessario!
Iniziamo.
Sbirciata
Ecco una rapida occhiata agli effetti al passaggio del mouse sullo sfondo di parallasse css che progetteremo in questo tutorial.
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, 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 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!
Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.
Andiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai avere quanto segue:
- Il tema Divi installato e attivo
- Una nuova pagina creata per costruire da zero sul front-end (visual builder)
- Immagini da utilizzare per contenuti fittizi
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Parte 1: Creazione di un effetto Hover Parallax Breakout in Divi
Innanzitutto, crea una sezione regolare con una riga di una colonna. 
Prima di aggiungere un modulo, apri le impostazioni della sezione e aggiungi un'immagine di sfondo utilizzando la parallasse CSS.
Assicurati che l'immagine sia larga almeno 1920 px. Il design funziona bene con un'immagine di sfondo più scura con molta trama. Sto usando uno dal nostro Coffee Shop Layout Pack che è disponibile da Divi Builder.
Quindi aggiungere un po' di riempimento alla sezione come segue:
Imbottitura: 10vw superiore, 10vw inferiore
Aggiungi un modulo Blurb
Una volta che lo sfondo della sezione e il riempimento sono a posto, aggiungi un modulo blurb alla riga.
Quindi aggiorna il contenuto del blurb con alcune frasi del corpo del testo. Puoi mantenere il titolo predefinito lì.
Quindi fare clic per utilizzare un'icona e selezionare l'icona del caffè per la descrizione.
Dopo che il contenuto è pronto, aggiorna le impostazioni di progettazione come segue:
Colore icona: #ffffff
Dimensione carattere icona: 50 px
Allineamento del testo: centro
Carattere del titolo: Oswald
Stile carattere titolo TT
Colore del testo del titolo: #ffffff
Spaziatura delle lettere del titolo: 2px
Carattere del corpo: Nunito
Colore del corpo del testo: #ffffff
Spaziatura delle lettere del corpo: 1px
Imbottitura: 30px in alto, 30px in basso, 30px a sinistra, 30px a destra
Regola larghezza riga
Dopo che il blurb è stato progettato, passa alle impostazioni della riga e regola la larghezza massima.
Larghezza massima: 80%
Impostazioni colonna
Per questo esempio, attiveremo l'effetto hover a livello di colonna. Ciò ti consente di utilizzare più moduli per creare il contenuto, anche se per ora stiamo usando solo un singolo modulo blurb.
Affinché questo effetto hover di parallasse funzioni, dobbiamo aggiungere la stessa immagine di sfondo alla colonna che abbiamo usato nella nostra sezione. Avremo anche bisogno di usare lo stesso metodo di parallasse CSS anche sull'immagine di sfondo della colonna.
Apri le impostazioni della colonna e aggiungi la stessa immagine di sfondo usando la parallasse CSS.
Non sarai in grado di vedere alcuna differenza tra l'immagine di sfondo della colonna e l'immagine di sfondo della sezione perché entrambe utilizzano la parallasse CSS che essenzialmente fissa l'immagine nello stesso identico punto della pagina web. Tuttavia, vedrai la differenza una volta che l'effetto hover è attivo.
Continuare ad aggiornare le impostazioni di progettazione della colonna come segue:
Imbottitura: 4vw superiore, 4vw inferiore
Angoli arrotondati: 10px
Quindi dai alla colonna un'ombra di casella che mostra solo al passaggio del mouse come segue:
Box Shadow: vedi screenshot
Posizione verticale dell'ombra del riquadro: 0px
Forza sfocatura ombra scatola: 36px
Colore ombra (predefinito): rgba(0,0,0,0)
Colore ombra (al passaggio del mouse): rgba(0,0,0,0.72)
Ora andiamo alle opzioni di trasformazione e aggiorniamo i seguenti stili di trasformazione al passaggio del mouse:
Scala di trasformazione (hover): 105%
Questo ingrandirà leggermente la colonna (e il suo contenuto) per creare l'effetto di un leggero salto fuori dall'immagine di sfondo.
Trasforma Trasla Asse Y (hover): -2,5%
Questo sposta leggermente la colonna al passaggio del mouse per creare un leggero spostamento asimmetrico.
Trasforma origine: 100% 50% (in basso al centro)
Questo inizia l'effetto di ridimensionamento dall'origine in basso al centro che, quando combinato con il valore di traslazione, assomiglia a un sottile effetto di cerniera.
Ecco l'effetto hover di parallasse css finora.
Ora apri le impostazioni della riga e duplica la colonna due volte per creare un totale di tre colonne ciascuna con gli stessi effetti di blurb e hover in atto.
Risultato finale
Ecco il disegno definitivo. Nota come le immagini di sfondo parallasse sono nascoste per impostazione predefinita quando scorri la pagina. Quindi appaiono quando si passa con il mouse su ciascuna delle colonne mentre escono. Puoi anche vedere che la parallasse funziona ancora sulla colonna quando scorri verso il basso la pagina mentre passi con il mouse sopra la colonna. È un effetto hover sottile, ma estremamente unico.
Aggiunta di rotazione all'effetto hover
Possiamo anche aggiungere una rotazione all'effetto hover di parallasse css che aggiunge un bel tocco al design. Basta aprire ciascuna delle impostazioni della colonna e aggiornare quanto segue:
Trasforma Ruota asse Z (al passaggio del mouse): 5deg
Se vuoi mescolare, puoi dare alla colonna centrale una rotazione di -5 gradi.
Questo è il risultato finale.
Ed ecco lo stesso design con un'immagine di sfondo più chiara e un testo più scuro.
Parte 2: Creazione di un effetto hover di parallasse con lente di ingrandimento in Divi
Duplica la sezione dal primo disegno, quindi apri le impostazioni della sezione e sostituisci l'immagine di sfondo con una nuova. Sto usando quello del nostro Video Game Layout Pack perché evidenzia davvero l'effetto di ingrandimento parallasse al passaggio del mouse.
Aggiorna impostazioni riga
Avremo bisogno di un po' di spazio in più per questo disegno, quindi apri le impostazioni della riga e aggiorna quanto segue:
Larghezza grondaia: 1
Larghezza: 100%
Larghezza massima: 98%
Successivamente, passa alla scheda del contenuto ed elimina due delle colonne in modo che ne rimanga solo una.
Impostazioni colonna
Per questo progetto, è necessario applicare l'effetto al passaggio del mouse a livello di modulo anziché a livello di colonna, quindi è necessario ripristinare gli stili predefiniti per la colonna. Per farlo, fai clic con il pulsante destro del mouse sull'elemento della colonna e seleziona "Ripristina stili elemento".
Aggiorna modulo Blurb
Dopo che le impostazioni della colonna sono state ripristinate agli stili predefiniti, apri le impostazioni del modulo blurb e aggiungi la stessa immagine di sfondo parallasse css che è stata aggiunta alla sezione.
Dimensionamento
Per creare un modulo circolare, prima dobbiamo assegnargli una larghezza e un'altezza corrispondenti come segue:
Larghezza: 300 px
Allineamento del modulo: centro
Altezza: 300 px
Frontiera
Per completare l'effetto circolare, dobbiamo aggiornare gli angoli arrotondati e dargli un leggero bordo.
Angoli Arrotondati: 50%
Larghezza del bordo: 1px
Colore del bordo: rgba (255,255,255,0.12)
Effetto al passaggio dell'ombra della scatola
Quindi, dai al blurb un'ombra di casella al passaggio del mouse come segue:
Box Shadow: vedi screenshot
Forza sfocatura ombra scatola: 36px
Colore ombra (predefinito): rgba(0,0,0,0)
Colore ombra (al passaggio del mouse): rgba(0,0,0,0.7)
Trasforma effetti al passaggio del mouse
Una volta posizionata l'ombra della scatola, aggiorna le opzioni di trasformazione come segue:
Trasforma origine (predefinito): 50% 0% (centro sinistra)
Ciò assicurerà che il blurb non si estenda all'esterno della pagina una volta posizionato all'estrema sinistra della riga di tre colonne.
Scala di trasformazione (hover): 130%
Questo ingrandirà il blurb e ingrandirà davvero l'immagine di sfondo parallasse per un fantastico effetto al passaggio del mouse.
Duplica la colonna
Una volta terminato il blurb, possiamo duplicare la colonna per creare tre colonne, ognuna con lo stesso modulo di blurb.
Apri le impostazioni della riga e duplica la colonna due volte per un totale di tre colonne.
Aggiorna Trasforma origine
Dal momento che i nostri moduli blurb hanno tutti l'origine della trasformazione impostata su "centro sinistra", dobbiamo regolarla per i blurb nella colonna centrale e destra in modo che si ridimensionino dalla posizione appropriata.
Apri le impostazioni per il modulo blurb nella colonna 2 e aggiorna quanto segue:
Trasforma origine: 50% 50% (centro centro)
Quindi apri le impostazioni per il modulo blurb nella colonna 3 e aggiorna quanto segue:
Trasforma origine: 50% 100% (centro destra)
Risultato finale
Ora controlla il risultato finale. Nota come l'effetto ingrandisce davvero l'immagine di sfondo di parallasse css dietro il blurb. E quando scorri verso il basso mentre passi con il mouse sul blurb, sembra che assomiglia all'effetto di una lente d'ingrandimento.
In effetti, è così bello che potremmo volerlo lasciare come stile predefinito invece che solo nello stato al passaggio del mouse.
Pensieri finali
Spero che gli esempi in questo post abbiano fatto fluire un po' i tuoi succhi creativi in modo che tu possa esplorare design ancora più interessanti ed effetti al passaggio del mouse da combinare con la parallasse css. Il processo di installazione è davvero semplice, ma le possibilità sono apparentemente infinite.
Non vedo l'ora di sentirti nei commenti.
Saluti!