Si alguna vez te has preguntado cómo hacer una animación 3D, visible moviendo el ratón, quédate con nosotros hasta el final de este texto y descúbrelo.
Comenzaremos a hacer nuestras animaciones agregando un widget de imagen, agregaremos tres imágenes con montañas para darnos un efecto 3D.
1.Agregar la primera imagen
Lo primero que debe hacer es seleccionar la primera imagen, que es la primera capa de montaña, en Elementor establezca el ancho de la imagen en 100%, luego en Avanzado, en la sección Posicionamiento personalizado, configure la imagen en posición absoluta. Lo siguiente que debe hacer es establecer el desplazamiento horizontal y vertical en VW, esto nos ayuda a ajustar nuestro diseño al ancho de la pantalla. Lo siguiente que debe hacer es establecer la orientación vertical en 25vw y la orientación horizontal en 2vw.
2.Agregar otra imagen
Luego duplica su imagen y la coloca en otra capa, en la configuración Avanzada en Posicionamiento personalizado cambie los números de desplazamiento, elimine el número horizontal y deje el número vertical como está.
3. Agregar una tercera imagen
Repita el mismo paso, duplique la imagen, seleccione su tercera capa y en el recorte avanzado en Posicionamiento personalizado establezca el ancho en Personalizado, luego las unidades en VW y el Ancho personalizado en 120 vw. Lo siguiente que debe hacer es establecer el desplazamiento en -15vw en la orientación horizontal y establecer el desplazamiento en 10vw en la orientación vertical.
Ahora agregará su animación, activando Efectos de mouse en Efectos de movimiento, haga clic en Seguimiento del mouse y deje la configuración predeterminada. Cambie la inclinación 3D hacia el lado opuesto y establezca la velocidad en 1.
Compruebe si la animación funciona pasando el cursor sobre la pantalla.
Para administrar todas las capas más fácilmente, debe acceder al navegador haciendo clic derecho y seleccionando Navegador, luego seleccione otra imagen. En Efectos de movimiento, active Efectos de mouse, luego haga clic en Seguimiento del mouse y cambie la dirección del movimiento a recta y la velocidad a 0,5, y establezca la velocidad de Inclinación 3D en 2.
Y en la última imagen, en Efectos de movimiento, active Efectos de mouse, luego en Seguimiento del mouse cambie la dirección del movimiento a directo y deje la velocidad como está. En Inclinación 3D, establezca la velocidad en 1.
Recuerde, este efecto de desplazamiento no funciona en teléfonos y tabletas porque no usan mouse.
Compruebe si lo logró moviendo el mouse por la pantalla.
Si te gustó este breve tutorial sobre cómo crear animaciones, visita nuestro Blog para ideas más interesantes.
Texto e imágenes tomadas de fuentes: YouTube
