¿Has visto elementos animados flotando y «rebotando» en algunos diseños de sitios web? Esta es una tendencia que se ha utilizado durante un tiempo, pero aún no ha pasado de moda. Por tal motivo, en esta ocasión te mostraré cómo animar Elementos Flotantes en Divi. Además, como efecto extra, te enseñaré cómo implementar un efecto de desplazamiento con secciones apiladas, más conocido como «Stacking Sections Scroll». ¿Lo mejor? No necesitaremos plugins para lograr estos increíbles efectos.
En más de una ocasión, me han enviado sitios web como este ejemplo en el que predominan elementos flotando sobre la ventana. Esto es algo que también se puede realizar con Divi, y hoy aprenderás cómo hacerlo.
Como bien sabemos, Divi cuenta con efectos de animación, pero estas animaciones solo se aplican una sola vez al cargar la página o al llegar a la sección correspondiente. También, hace tiempo Divi incluyó Efectos de Desplazamiento como característica nativa (ver tutorial). Con esta característica, podemos lograr efectos muy buenos en Divi, pero estos efectos solo se animan al hacer scroll sobre la página, y para este tutorial no es algo que queramos hacer.
Más bien, en esta ocasión necesitamos que los elementos estén todo el tiempo en movimiento, ya sea de arriba hacia abajo, de izquierda a derecha, o de adentro hacia afuera. Este tipo de efectos no se puede lograr de forma nativa con Divi, pero no te preocupes, en este tutorial aprenderás un «trucazo» para lograr este tipo de animaciones.
Por si fuera poco, también te enseñaré a crear un efecto de desplazamiento con secciones apiladas. De hecho, esta es una característica que anteriormente ya te he enseñado (ver tutorial), pero me pareció interesante refrescarte la memoria de cómo hacerlo hoy, aprovechando que es un efecto acorde a nuestro diseño.
A continuación, te dejaré los recursos que vamos a necesitar para este tutorial, así como el enlace a la demo:
> Enlace a la demo
> Descarga los assets para este ejercicio
> Enlace a animista.net
> Descarga Formas 3D en Figma






0 comentarios