Come aggiungere effetti di inclinazione al passaggio del mouse a qualsiasi elemento in Divi
Pubblicato: 2021-08-12L'aggiunta di effetti di inclinazione al passaggio del mouse al tuo web design è uno di quei modi divertenti e coinvolgenti per dare vita al tuo sito web Divi. Di solito questo tipo di design richiede un plugin o un codice più avanzato (come in questo tutorial). Ma questo processo è molto più semplice usando Tilt.js (un leggero effetto di inclinazione al passaggio del mouse per jQuery). Con Tilt.js, puoi facilmente applicare effetti di inclinazione al passaggio del mouse a qualsiasi cosa in pochi minuti.
In questo tutorial, ti mostreremo come aggiungere effetti di inclinazione al passaggio del mouse a qualsiasi elemento in Divi. Utilizzando una combinazione di frammenti jQuery tilt.js e il generatore Divi, ti mostreremo come aggiungere effetti di inclinazione al passaggio del mouse impressionanti a un'immagine, una colonna di moduli, una riga e altro. Ti mostreremo anche come aggiungere sorprendenti effetti di parallasse 3D.
Iniziamo!
Sbirciata
Per una demo dal vivo delle funzionalità alla base di questo tutorial, dai un'occhiata a questo codepen.
Ed ecco una rapida occhiata al design che costruiremo 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 della sezione nella tua libreria Divi, vai alla libreria Divi.
Fare clic sul pulsante Importa.
Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Le basi per l'utilizzo di Tilt.js
Tilt.js è un leggero effetto di inclinazione al passaggio del mouse di parallasse per jQuery. Con solo un paio di righe di jQuery, puoi aggiungere effetti di inclinazione al passaggio del mouse a qualsiasi elemento della pagina. Viene fornito con un massimo di 10 opzioni (consultare la documentazione) che possono essere facilmente aggiunte per controllare il design e le funzionalità dell'effetto di inclinazione, tra cui la scala e un bellissimo effetto abbagliante .
Al livello più elementare, una volta che accedi alla libreria tilt.js, puoi aggiungere una classe CSS all'elemento che desideri inclinare al passaggio del mouse e quindi utilizzare un semplice frammento jQuery per applicare la funzione tilt su un oggetto jQuery con la stessa classe .
Ad esempio, supponiamo di aggiungere una classe CSS personalizzata a un modulo immagine denominato "et-js-tilt".
Tutto ciò che devi fare dopo è aggiungere il seguente frammento jQuery per aggiungere l'effetto di inclinazione al passaggio del mouse all'immagine.
$(".et-js-tilt").tilt();
Quindi puoi impostare opzioni aggiuntive per l'effetto di inclinazione. Ad esempio, puoi aggiungere un effetto di scala e abbagliamento con il seguente frammento di codice.
$(".et-js-tilt").tilt({
glare: true,
maxGlare: 0.7,
scale: 1.1
});
Il risultato sarebbe questo...
Per un effetto più avanzato, puoi aggiungere transform:translateZ() a qualsiasi elemento figlio per ottenere un effetto di parallasse 3D. Più su quello più tardi.
Ora che abbiamo una conoscenza di base di come usare tilt.js, esploriamo come usarlo in Divi.
Come aggiungere effetti di inclinazione al passaggio del mouse a qualsiasi elemento in Divi
Aggiunta di un effetto Tilt Hover ai moduli Divi
Aggiungi una riga a tre colonne alla sezione normale predefinita.
Aggiungi modulo immagine
Nella prima colonna, aggiungi un modulo immagine.
Nota: puoi usare qualsiasi modulo tu voglia. Non deve essere un modulo immagine.
Carica un'immagine a tua scelta. Sto usando uno dal pacchetto di layout per biscotti fatti in casa.
Aggiungi classe modulo immagine
Nella scheda Avanzate, aggiungi la seguente Classe CSS:
- Classe CSS: et-js-tilt
Questa classe verrà utilizzata in seguito come selettore per la nostra funzione di inclinazione.
Copia e incolla moduli immagine
Quindi, copia il modulo immagine e incollane uno in ciascuna delle restanti due colonne.
Se lo desideri, puoi sostituire le immagini duplicate con altre nuove. Assicurati solo che ogni modulo immagine abbia la classe CSS "et-js-tilt".
Aggiungi il JQuery tilt.js
Per aggiungere la libreria tilt.js e lo snippet di codice necessari per inclinare le nostre immagini, utilizzeremo un modulo di codice.
Innanzitutto, aggiungi una nuova riga a una colonna sotto la riga esistente.
Quindi aggiungi un modulo di codice alla nuova riga.
Successivamente, dobbiamo accedere alla libreria tilt.js aggiungendo uno script che importi tilt.js dal loro CDN (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Incolla il seguente script nella casella del codice.
Utilizzare il seguente src all'interno di un tag di script per importare la libreria:
src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"
Dovrebbe sembrare come questo:
È importante importare tilt.js prima di aggiungere il codice che lo utilizzerà. Quindi, dopo che lo script punta a tilt.js, aggiungi i tag di script necessari per avvolgere il JQuery che dobbiamo aggiungere. Quindi incolla il seguente JQuery tra i tag di script .
jQuery(document).ready(function ($) {
if ($(window).width() > 980) {
$(".et-js-tilt").tilt({
glare: true,
maxGlare: 0.7,
scale: 1.1,
perspective: 300,
});
}
});
Nota che la funzione tilt() è all'interno di un'istruzione if che verrà eseguita quando la larghezza del browser è maggiore di 980px. Ciò assicurerà che l'effetto si verifichi solo sul desktop.
Ecco il risultato.
Aggiunta di un effetto di inclinazione al passaggio del mouse alla riga
Come accennato in precedenza, puoi aggiungere questo effetto di inclinazione al passaggio del mouse a qualsiasi elemento in Divi. Questo include un'intera riga. Inoltre, puoi aggiungere un effetto di inclinazione a una riga mantenendo gli effetti di inclinazione per ciascuno dei moduli all'interno della riga.
Ecco come farlo.
Duplica riga e aggiungi una classe CSS univoca alla riga
Duplica la riga di immagini esistente e quindi apri le impostazioni della riga duplicata. Nella scheda Avanzate, assegna alla riga una Classe CSS univoca come segue:
- Classe CSS: et-row-js-tilt
Aggiungi jQuery
Quindi aggiungi la seguente jQuery sotto la precedente funzione di inclinazione per applicare una funzione di inclinazione separata alla riga.
$(".et-row-js-tilt").tilt({
scale: 1,
perspective: 1200,
});
Nota che per questo effetto di inclinazione, abbiamo riportato la scala a 1 e aumentato il valore della prospettiva in modo che l'inclinazione sia più sottile.
Ecco il risultato.
Nota come la riga ha una funzione di inclinazione che si attiva quando passi con il mouse sopra la riga e ciascuno dei moduli immagine ha anche lo stesso effetto di inclinazione che abbiamo aggiunto in precedenza. In questo modo è possibile applicare istanze di effetti di inclinazione nidificate.
Aggiunta di un effetto Tilt Hover a una colonna con più moduli Divi
In alcuni casi, è utile aggiungere un effetto di inclinazione a una colonna di moduli. Ciò ti consentirà di progettare più moduli all'interno di una colonna con Divi e quindi avere tutti quegli elementi inclinati come un'unità. Per darti un esempio di come ciò, aggiungeremo un effetto di inclinazione al passaggio del mouse a una colonna con un modulo immagine, un modulo testo e un modulo pulsante.
Aggiungi nuova riga
Per iniziare, crea una nuova riga di colonna un sesto due terzi un sesto sotto la riga di immagini precedente.
Aggiungi modulo immagine
All'interno della colonna 2 (la colonna centrale), aggiungi un nuovo modulo immagine.
Carica un'immagine nel modulo e imposta l'allineamento dell'immagine al centro.
Modulo Aggiungi testo
Sotto il modulo immagine, aggiungi un modulo di testo con la seguente intestazione H2:
<h2>Local Organic</h2>
Quindi aggiorna gli stili dell'intestazione 2 come segue:
- Carattere titolo 2: Berkshire Swash
- Intestazione 2 Allineamento del testo: Centro
- Colore testo titolo 2: #000000
- Titolo 2: Dimensione testo: 60 px (desktop), 32 px (tablet), 20 px (telefono)
- Altezza riga intestazione 2: 1.2em
Aggiungi modulo pulsante
Sotto il modulo di testo, aggiungi un modulo pulsante.
Aggiorna il testo del pulsante per leggere "Chi siamo" e aggiorna le impostazioni di progettazione come segue:
- Allineamento dei pulsanti: centratore
- Dimensione del testo del pulsante: 18px
- Colore del testo del pulsante: #fff
- Colore di sfondo del pulsante: #000
- Larghezza bordo pulsante: 0px
- Raggio del bordo del pulsante: 100 px
- Carattere pulsante: sabbie mobili
- Peso del carattere del pulsante: grassetto
- Imbottitura: 16px in alto, 16px in basso, 30px a sinistra, 30px a destra
- Box Shadow: vedi screenshot
Impostazioni colonna
Una volta terminati i tre moduli, apri le impostazioni per la colonna principale di tali moduli (colonna 2) e aggiorna quanto segue:
- Colore di sfondo: #f5cee6
- Imbottitura: 50 px (superiore e inferiore), 20 px (sinistra e destra)
Aggiunta della classe CSS alla colonna
Nella scheda Avanzate, aggiungi la seguente Classe CSS:
- Classe CSS: et-column-js-tilt
Aggiunta di jQuery per applicare un effetto di inclinazione alla colonna
Per aggiungere l'effetto tilt alla colonna, possiamo aggiungere un altro frammento simile di jQuery che ha come target la classe CSS della colonna. Incolla lo snippet seguente sotto lo snippet precedente indirizzato alla riga.
$(".et-column-js-tilt").tilt({
scale: 1.1,
perspective: 1000,
});
Questo è il risultato finale.
Aggiunta dell'effetto di parallasse 3D agli elementi interni
Per un effetto hover tilt più avanzato, possiamo aggiungere un effetto di parallasse 3D ai moduli interni della colonna. Usando una combinazione di prospettiva e transform:translateZ() , possiamo far apparire ciascuno dei moduli all'interno della colonna nello spazio 3D quando l'effetto hover tilt è attivo.
Ecco come farlo.
Duplica riga precedente
Innanzitutto, duplica la riga precedente con l'effetto di inclinazione aggiunto alla colonna centrale.
Aggiungi una classe di colonna univoca
Quindi aggiorna la colonna centrale (colonna 2) con una classe CSS univoca come segue:
- Classe CSS: et-column-js-tilt-3d
CSS personalizzato
Per assicurarti che i moduli interni conservino l'effetto 3d, aggiungi il seguente CSS personalizzato all'elemento principale della colonna:
transform-style: preserve-3d;
Aggiungi jQuery e CSS
Quindi aggiungi altri frammenti di jQuery sotto il precedente frammento di funzione di inclinazione indirizzato alla colonna come segue:
const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
scale: 1.1,
perspective: 1000,
});
columnTilt3d.on("tilt.mouseEnter", function (e) {
$(e.target).addClass("tilt-active");
});
columnTilt3d.on("tilt.mouseLeave", function (e) {
$(e.target).removeClass("tilt-active");
});
Questo jQuery aggiunge un'altra funzione di inclinazione di base alla colonna proprio come nell'esempio precedente. Tuttavia, il codice attiva anche una nuova classe ("tilt-active") nella colonna ogni volta che l'effetto tilt è attivo. Possiamo usare questa nuova classe per applicare un valore transform: translateZ() a ciascuno dei moduli quando si passa con il mouse sulla colonna. Questo creerà l'effetto di parallasse 3D pop-out.
Per fare ciò, aggiungi il seguente CSS personalizzato nella parte superiore della casella/del contenuto del codice assicurandoti di racchiudere il CSS nei tag di stile necessari.
.et-column-js-tilt-3d.tilt-active .et_pb_image {
transform: translateZ(100px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_text {
transform: translateZ(40px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_button {
transform: translateZ(50px);
}
Ora controlla il risultato finale. Nota come i tre moduli escono nello spazio 3d mentre ruotano durante l'effetto di inclinazione.
Risultati finali
Ecco un altro sguardo ai risultati finali per i nostri esempi.
Pensieri finali
Gli effetti di inclinazione al passaggio del mouse offerti da Tilt.js sono davvero divertenti da sperimentare. Anche se ho usato alcuni esempi di base in questo tutorial, potresti facilmente passare una giornata campale applicando questi effetti di inclinazione al passaggio del mouse a uno qualsiasi dei nostri layout predefiniti o sul tuo sito. Divertiti!
Non vedo l'ora di sentirti nei commenti.
Saluti!