Se vi siete mai chiesti come realizzare un'animazione 3D, visibile muovendo il mouse, restate con noi fino alla fine di questo testo e scopritelo.
Inizieremo a realizzare le nostre animazioni aggiungendo un widget immagine: aggiungeremo tre immagini con montagne per ottenere un effetto 3D.
1.Aggiunta della prima immagine
La prima cosa da fare è selezionare la prima immagine, che rappresenta il primo livello della montagna. In Elementor, impostare la larghezza dell'immagine a 100%, quindi in Avanzate, nella sezione Posizionamento personalizzato, impostare l'immagine su Posizione assoluta. Successivamente, impostare l'offset orizzontale e verticale su VW, per adattare il design alla larghezza dello schermo. Impostare poi l'orientamento verticale a 25vw e quello orizzontale a 2vw.
2.Aggiungere un'altra immagine
Quindi duplichi l'immagine e la posizioni su un altro livello, nelle impostazioni avanzate in Posizionamento personalizzato modifichi i numeri di offset, elimini il numero orizzontale e lasci invariato quello verticale.
3.Aggiungere una terza immagine
Ripeti lo stesso passaggio, duplica l'immagine, seleziona il terzo livello e, in Ritaglio avanzato, in Posizionamento personalizzato, imposta la larghezza su Personalizzato, quindi le unità su VW e la Larghezza personalizzata su 120 vw. Il passo successivo è impostare l'offset a -15 vw nell'orientamento orizzontale e a 10 vw in quello verticale.
Ora puoi aggiungere la tua animazione attivando gli Effetti Mouse in Effetti Movimento, cliccando su Traccia Mouse e mantenendo le impostazioni predefinite. Cambia l'Inclinazione 3D sul lato opposto e imposta la velocità a 1.
Controlla se l'animazione funziona passando il mouse sopra lo schermo.
Per gestire tutti i livelli più facilmente, è consigliabile accedere al navigatore facendo clic con il pulsante destro del mouse e selezionando Navigatore, quindi selezionare un'altra immagine. In Effetti movimento, attiva Effetti mouse, quindi fai clic su Traccia mouse e modifica la direzione del movimento in rettilineo e la velocità a 0,5, quindi imposta la velocità di Inclinazione 3D a 2.
E nell'ultima immagine, in Effetti Movimento attiva gli Effetti Mouse, poi in Traccia Mouse cambia la direzione del movimento in Diretto e lascia la velocità invariata. In Inclinazione 3D, imposta la velocità a 1.
Tieni presente che questo effetto hover non funziona su telefoni e tablet, perché questi dispositivi non utilizzano un mouse.
Controlla se ci sei riuscito muovendo il mouse sullo schermo.
Se ti è piaciuto questo breve tutorial sulla creazione di animazioni, visita il nostro blog per idee più interessanti.
Testo e immagini tratti da fonti: Youtube
