Vorresti aggiungere un effetto di inclinazione con Divi su qualche elemento della tua pagina?
Aggiunta di effetti di inclinazione al passaggio del mouse al tuo sito web è uno di quei modi divertenti e coinvolgenti per portare il tuo sito web Divi. Di solito questo tipo di design richiede un plug-in o un codice più avanzato. 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 su qualsiasi cosa in pochi minuti.
In questo tutorial ti mostreremo come aggiungere effetti di inclinazione al passaggio del mouse a qualsiasi elemento di Divi. Utilizzando una combinazione di frammenti jQuery tilt.js e il builder Divi, ti mostreremo come aggiungere fantastici effetti di inclinazione al passaggio del mouse a un'immagine, una colonna di moduli, una riga, ecc.
Ti mostreremo anche come aggiungere incredibili effetti di parallasse 3D.
Cominciamo!
Panoramica
Ecco una rapida panoramica del risultato che otterremo in questo tutorial.
Guarda anche: Divi: come rivelare il contenuto al passaggio del mouse sopra il divisore di sezione
Cosa ti serve per iniziare
Dalla dashboard di WordPress, vai a Pagine> Aggiungi nuovo per creare una nuova pagina.
Dagli un titolo che abbia senso per te e fai clic Usa Divi Builder
quindi fare clic su Inizia a costruire (Costruisci da zero)
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Aggiungi effetti di inclinazione al passaggio del mouse su qualsiasi elemento in Divi
Aggiungi un effetto Tilt Hover ai moduli Divi
Iniziamo aggiungendo una riga a tre colonne alla sezione normale predefinita.
Aggiungi un modulo Immagine
Nella prima colonna, aggiungi un modulo Immagine.
Nota: puoi utilizzare qualsiasi modulo a tua scelta. Non deve essere affatto un modulo Immagine.
Carica un'immagine a tua scelta.
Aggiungi una classe del modulo Immagine
Sotto la scheda Tecnologia, aggiungi la seguente classe CSS:
- Classe CSS: et-js-tilt
Questa classe verrà utilizzata come selettore per la nostra funzione di inclinazione in seguito.
Copia e incolla il modulo immagine precedente
Quindi, copia il modulo Immagine e incollane uno in ciascuna delle due colonne rimanenti.
Se lo desideri, puoi sostituire le immagini duplicate con altre nuove. Assicurati solo che ogni modulo immagine appartenga alla classe CSS "et-js-tilt".
Aggiungi la libreria JQuery "tilt.js"
Per aggiungere la libreria tilt.js e il frammento di codice necessario per distorcere le nostre immagini, useremo un modulo Codice.
Innanzitutto, aggiungi una nuova riga una colonna sotto la riga esistente.
Quindi aggiungi un modulo Codice alla nuova riga.
Quindi dobbiamo accedere al libreria tilt.js aggiungendo uno script che importa tilt.js dalla 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 codice src in 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,
});
}
});
Si noti che la funzione tilt() si trova all'interno di un'istruzione if che verrà eseguita quando la larghezza del browser è maggiore di 980px. Ciò garantirà che l'effetto si verifichi solo su un computer desktop.
Ecco il risultato.
Aggiunto effetto di inclinazione al passaggio del mouse sulla linea
Come accennato in precedenza, puoi aggiungere questo effetto di inclinazione al passaggio del mouse a qualsiasi elemento Divi. Ciò include un'intera linea.
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.
Duplica la riga e aggiungi una classe CSS univoca alla riga
Duplica la riga di immagini esistente, quindi apri le impostazioni della riga duplicata. Sotto la scheda Tecnologia, dai 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 linea.
$(".et-row-js-tilt").tilt({
scale: 1,
perspective: 1200,
});Si noti che per questo effetto di inclinazione, abbiamo ridotto 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 il mouse sopra la riga e anche ciascuno dei moduli Immagine ha lo stesso effetto di inclinazione che abbiamo aggiunto in precedenza. Ecco come puoi applicare istanze di effetti di inclinazione nidificate.
Aggiungi un effetto Tilt Hover a una colonna con diversi moduli Divi
In alcuni casi, è utile aggiungere un effetto di inclinazione a una colonna di moduli. Ciò ti consentirà di progettare più moduli in una colonna con Divi e quindi avere tutti quegli elementi angolati come una singola unità.
Per darti un esempio di come farlo, aggiungeremo un effetto di inclinazione al passaggio del mouse a una colonna contenente un modulo Immagine, un modulo Testo e un modulo Pulsante.
Aggiungi una nuova linea
Per iniziare, crea una nuova riga con la seguente struttura di colonne:
Aggiungi un modulo Immagine
All'interno della colonna 2 (la colonna centrale), aggiungi un nuovo modulo Immagine.
Carica un'immagine nel modulo.
Imposta l'allineamento dell'immagine al centro.
Aggiungi un modulo di testo
Sotto il modulo Immagine, aggiungi un modulo Testo con la seguente intestazione H2:
<h2>Local Organic</h2>
Quindi, aggiorna gli stili di intestazione H2 come segue:
- Carattere: Berkshire Swash
- Allineamento del testo: centrato
- Colore del testo: #000000
- Dimensioni: 60px
- Altezza della linea: 1,2 em
Aggiungi modulo pulsante
Sotto il modulo Testo, aggiungi un modulo Pulsante.
Aggiorna il testo del pulsante per leggere "Ulteriori informazioni..."
Aggiorna le impostazioni di personalizzazione come segue:
- Allineamento pulsanti: centro
- Usa stili personalizzati per il pulsante
- Dimensione testo pulsante: 18px
- Colore del testo: #fff
- Sfondo pulsante: #000
- Larghezza bordo pulsante: 0 pixel
- Raggio di confine: 100px
- Carattere del pulsante: Sabbie mobili
- Peso del carattere: grassetto
- Imbottitura (superiore e inferiore): 16px
- Imbottitura (sinistra e destra): 30px
- Box Shadow: vedi screenshot
Parametri della colonna
Una volta completati tutti e tre i moduli, apri le impostazioni per la colonna padre di quei moduli (colonna 2) e aggiorna quanto segue:
- Sfondo: #f5cee6
- Imbottitura (superiore e inferiore): 50px
- Imbottitura (sinistra e destra): 20px
Aggiunta della classe CSS alla colonna
Nella scheda Avanzate, aggiungi la seguente classe CSS:
- Classe CSS: et-column-js-tilt
Aggiunto jQuery per applicare l'effetto di inclinazione alla colonna
Per aggiungere l'effetto skew alla colonna, possiamo aggiungere un altro snippet jQuery simile che ha come target la colonna CSS Class.
Incolla il seguente snippet di codice sotto lo snippet di codice precedente destinato alla riga.
$(".et-column-js-tilt").tilt({
scale: 1.1,
perspective: 1000,
});
Ecco il risultato finale.
Aggiunto effetto di parallasse 3D agli interni
Per un effetto di inclinazione al passaggio del mouse più avanzato, possiamo aggiungere un effetto di parallasse 3D ai moduli della colonna interna.
Usando una combinazione di prospettiva e transform:translateZ() , possiamo far apparire ciascuno dei moduli della colonna nello spazio 3D quando l'effetto tilt-on-hover è attivo.
Ecco come.
Duplica la riga precedente
Innanzitutto, duplica la riga precedente con l'effetto di inclinazione aggiunto alla colonna centrale.
Aggiungi una classe a colonna singola
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 della colonna principale:
transform-style: preserve-3d;
Aggiungi jQuery e CSS
Quindi, aggiungi altri frammenti di jQuery sotto il precedente snippet della funzione skew mirato 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 l'esempio precedente.
.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 guarda il risultato finale. Nota come i tre moduli appaiono nello spazio 3D mentre ruotano durante l'effetto di inclinazione.
Leggi anche: Divi: come rivelare il contenuto al passaggio del mouse sopra il divisore di sezione
Risultati finali
Ecco un altro sguardo ai risultati finali per i nostri esempi.
Scarica DIVI ora!!!
Conclusione
Gli effetti di inclinazione al passaggio del mouse offerti da Tilt.js sono davvero divertenti da sperimentare.
Sebbene in questo tutorial abbiamo utilizzato alcuni esempi di base, puoi facilmente passare una giornata campale applicando questi effetti di inclinazione al passaggio del mouse a uno dei nostri layout predefiniti o al tuo sito.
Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
