Con l'aiuto di Costruttore Divi, possiamo fare molti design unici e creativi. Oggi vedremo come creare un'animazione 3D dinamica utilizzando divi visual page builder che è interattivo con il movimento del cursore del mouse. Di solito, passiamo il mouse o facciamo clic sull'animazione su un oggetto, ma qui animeremo un oggetto che si muoverà in direzioni diverse con il movimento del mouse. Inoltre, vedrai come aggiungere un effetto 3D al passaggio del mouse a un oggetto che esegue animazioni interattive e porta vita al design!
Useremo Costruttore Divi per il design e in seguito aggiungeremo del codice CSS e jQuery per creare la funzionalità di animazione che renderà vivo il design! Puoi utilizzare questo design per mostrare i tuoi prodotti in un modo nuovo ai tuoi visitatori!
Progettazione finale
Se tutto va bene come pianifichiamo, allora il nostro design finale sarà molto simile a quello.
Creazione di un effetto di spostamento dinamico del mouse 3D su Divi
Attività 1: Configurazione pagina
Dal momento che si desidera creare questo effetto sulla vostra pagina web, crediamo che avete già installato l'ultima versione di Divi. Ora, "Aggiungi una pagina" dal dashboard, title it come necessario ed espandila con Divi builder.
Create Amazing Websites
Con il miglior generatore di pagine gratuito Elementor
Parti ora
Ora scegli "Costruisci da zero" e inizia ahed.
Per attivare l'animazione 3D al passaggio del mouse, prenderemo di mira la riga. Lo chiameremo "contenitore hover". D'altra parte, la colonna fungerà da scheda, che si animerà con gli elementi figlio durante il passaggio del mouse sulla riga.
Section Styling
Aprire le impostazioni predefinite della sezione e aggiornare quanto segue
- Colore di sfondo - RGBA(68,55,99,0.1). Qui 0,1 è opacità.
- Aggiungere la spaziatura interna "7vh" sia in alto che in basso.
Hover Container
Aggiungere ora una riga a una colonna alla sezione preparata.
Aggiornare ora l'impostazione della riga con le modifiche seguenti.
- Abilitare "Larghezza grondaia personalizzata" e modificare il valore su 1
- Larghezza 100%
- Larghezza massima: 70% (desktop), 60% (tablet), 50% (mobile)
- Imbottitura: 7vh in alto e in basso, 5vw a sinistra e a destra.
Nella scheda avanzata aggiungere una classe CSS personalizzata.
- Classe CSS: et-hover-container
Inoltre, aggiungi il codice CSS all'elemento principale.
display:flex;
align-items:center;
justify-content:center;
The Card
Dopo aver completato l'aggiornamento della riga, aprire l'impostazione della colonna in modo che stili la scheda.
- Colore sfondo #ffffff
- Imbottitura: 7vh superiore, 7vh inferiore, 5% a sinistra, 5% a destra
- Angoli arrotondati: 30px
- Ombra casella: vedere lo screenshot
- Posizione verticale ombreggiatura scatola: 0px
- Forza sfocatura ombra scatola: 80px
- Colore ombreggiatura: rgba(0,0,0,0,2)
Nella scheda avanzata aggiungere una classe CSS personalizzata.
- Classe CSS: et-mousemove-card
Inoltre, aggiungi questo codice CSS sotto l'elemento principale.
max-width: 600px;
Impostare ora le proprietà di overflow su visibile sia per l'overflow orizzontale che verticale.
Attività 3: Creazione dell'elemento card
The Circle Background With Logo
Per il primo elemento della nostra carta, aggiungeremo uno sfondo circolare che include il nostro logo che si siederà dietro la nostra immagine principale del prodotto.
Ora aggiungi "Testo" sulla colonna e rimuovi il testo predefinito per mantenere il corpo vuoto.
È il momento di aggiungere uno sfondo sfumato.
- Sfondo sfumato Colore sinistro #443763
- Sfondo sfumato Colore destro #EA3900
- Impostare Direzione sfumatura su 90 gradi
Insieme al colore sfumato, aggiungi un logo come immagine di sfondo. La dimensione dell'immagine deve essere 60px per 60px e impostare il valore delle dimensioni dell'immagine di sfondo su "Dimensioni effettive"
Nella scheda "Progettazione" modificare i valori come segue nella sezione "Ridimensionamento". Imposta il valore di larghezza 160px per il desktop, 150px per tablet e 80px per smartphone.
Inoltre, impostare il valore di altezza uguale alla larghezza. Infine, impostare gli angoli arrotondati sul valore dell'80% nella sezione "Bordo".
Nella scheda "Avanzate" aggiornare le posizioni come indicato di seguito.
- Posizione : Assoluto
- Posizione : Centro superiore
- Offset verticale: 15%
The Card Image
Ora, come abbiamo finito con la parte logo, aggiungiamo l'immagine del prodotto sulla scheda. Aggiungeremo un nuovo modulo immagine sotto il modulo di testo precedente.
Ora carica un'immagine del prodotto. Assicurarsi che l'immagine sia trasparente e in formato Png. Qui stiamo usando l'immagine di una Ferrari rossa.
Nella scheda "Progettazione" modificare i valori come indicato di seguito.
- Allineamento immagine: Centro
- Larghezza: 90%
- Margine: 12vh superiore e 5vh inferiore (regolare i valori in base alle proprie esigenze)
Nella sezione della scheda "Avanzate" aggiungi una classe CSS personalizzata per l'immagine.
- Classe CSS: et-card-image
The Car Heading
Ora creeremo un titolo per la Carta. Con la nostra immagine dell'auto in posizione, aggiungiamo un modulo di testo sotto l'immagine per creare il nostro titolo della carta.
Nel corpo rimuovere il testo predefinito e aggiungere l'intestazione H2 di HTML riportata di seguito.
<h2>The <span style="color: #ea3900:"> Ferrari</span> Car</h2>
Ora, nella sezione progettazione modificare i valori seguenti:
- Titolo 2 Tipo di carattere : Bebas Neue
- Titolo 2 Allineamento testo : Centro
- Titolo 2 Colore testo: #443763
- Titolo 2 Dimensione testo: 75px per desktop, 60px per tablet e 45px per dispositivi mobili.
- Rubrica 2 Spaziatura lettere : 0.05em
- Margine : 4vh in basso
Nella "sezione Avanzate" aggiungere una classe CSS personalizzata
- Classe CSS: et-card-heading
The Card Info
Ora aggiungeremo le informazioni sulla carta. Aggiungeremo un altro modulo di testo per le informazioni perché ci permetterà di aggiungere diversi effetti di animazione 3D a ciascuno di essi. Aggiungiamo un nuovo modulo di testo sotto il modulo di testo del titolo.
Aggiungere ora il contenuto di testo seguente al corpo.
<p>The one and only Ferrari Car <br>(By CodeWatchers)</p>
Nella scheda Progettazione aggiornare quanto segue:
- Spessore carattere testo: Semi grassetto
- Dimensioni testo: 18px (desktop) e 16px (tablet e telefono).
- Altezza riga di testo: 1.8em
- Allineamento testo : Al centro
- Margine : 4vh
Ora aggiungi una classe CSS personalizzata a questo modulo.
- Classe CSS: et-card-info
The Button
Ora aggiungi un nuovo modulo pulsante sotto il modulo di testo info. Questo aggiungerà un pulsante sulla scheda.
Nella scheda "Contenuto" delle impostazioni del pulsante modificare il testo del pulsante.
- Testo pulsante: fai un'offerta.
Nella scheda "Progettazione", premere il pulsante come indicato di seguito.
- Usare stili personalizzati per il pulsante: SI
- Dimensioni testo pulsante: 25px (desktop), 20px (tablet), 16px (telefono)
- Colore testo pulsante: #ffffff
- Colore sfondo pulsante: #443763
- Larghezza bordo pulsante: 0px
- Raggio bordo pulsante: 30px
- Spaziatura lettere pulsante: 0.1em
- Carattere pulsante: Bebas Neue
- Imbottitura (desktop): 0,5em in alto, 0,5em in basso, 3em a sinistra, 3em a destra
- Imbottitura (telefono): 0,5em in alto, 0,5em in basso, 2em a sinistra, 2em a destra
Ora aggiungi una classe CSS personalizzata
- Classe CSS: et-card-button
Result Till Now
Ecco il nostro output di progettazione finale senza l'animazione.
Ora aggiungeremo del codice personalizzato per dare vita a questo design.
Poiché il nostro design è completo, ora aggiungeremo codice CSS e JQuery per dare alle nostre colonne e agli elementi della scheda appena creati un effetto dinamico di animazione di spostamento del mouse 3D.
A tale fine, aggiungere un nuovo modulo di codice sotto il modulo pulsante.
Incollare il codice CSS personalizzato indicato nella casella e assicurarsi di eseguire il wrapping del codice nel tag "Style".
<style>
/*add perspective to row for 3d perspective of child elements*/
.et-hover-container {
perspective: 1000px;
}
/*preserve-3d needed for 3d effect on card elements*/
.et-mousemove-card {
transform-style: preserve-3d;
transition: all 100ms linear !important;
}
/*transition timing function and duration for card elements*/
.et-card-image,
.et-popout-title,
.et-card-info,
.et-mousemove-card .et_pb_button_module_wrapper {
transition: all 750ms ease-out !important;
}
/*transform styles for card elements*/
.et-card-image.transform-3d {
transform: translateZ(150px) rotateZ(10deg) !important;
}
.et-card-heading.transform-3d {
transform: translateZ(150px) !important;
}
.et-card-info.transform-3d {
transform: translateZ(50px) !important;
}
.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {
transform: translateZ(150px) rotateX(20deg) !important;
}
</style>Il codice CSS sarà simile a questo nella scheda contenuto del modulo Codice.
Sotto il CSS, aggiungi il seguente JQuery e assicurati che il codice si trova all'interno dei tag "Script".
<script>
jQuery(document).ready(function ($) {
//Items
var $hoverContainer = $(".et-hover-container");
var $mousemoveCard = $(".et-mousemove-card");
var $cardImage = $(".et-card-image");
var $cardHeading = $(".et-card-heading");
var $cardInfo = $(".et-card-info");
var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper");
//Moving Animation Event
$hoverContainer.on("mousemove", function (e) {
let xAxis = (window.innerWidth / 2 - e.clientX) / 25;
let yAxis = (window.innerHeight / 2 - e.clientY) / 25;
$mousemoveCard.css(
"transform",
`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`
);
});
//Animate on Hover
$hoverContainer.hover(function () {
$mousemoveCard.toggleClass("transform-3d");
$cardHeading.toggleClass("transform-3d");
$cardImage.toggleClass("transform-3d");
$cardButton.toggleClass("transform-3d");
$cardInfo.toggleClass("transform-3d");
});
//Pop Back on mouseleave
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);
});
});
</script>
Il codice seguente dovrebbe essere simile a questo nel pannello del codice.
Ora salva l'intero lavoro e controlla l'intero lavoro in una pagina live.
Output finale
Quindi tutto il nostro design è così. Fico eh!
Parole finali
L'animazione 3D che abbiamo visto nel tutorial di oggi è molto facile e divertente da imparare. Questo è un effetto di animazione unico e avanzato che può essere controllato dal movimento del mouse. Possiamo progettarlo attraverso alcune semplici codifica CSS e JQuery. Indubbiamente, Divi è un potente generatore di pagine e attraverso la codifica personalizzata, è possibile portare un design magico sui siti Web.
