Cerrar video

Cómo animar Elementos Flotantes y crear un efecto «Stacking Sections Scroll» en Divi sin plugins

por | Ago 8, 2024 | Tutorial gratuito | 0 Comentarios

¿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.

Cómo animar Elementos Flotantes y crear un efecto "Stacking Sections Scroll" en Divi sin plugins

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

¿Te ha gustado este tutorial? 🚀

¡Los Tutoriales Premium te van a encantar! Desde solo $10 USD al mes accede a más de 200 (¡y contando!) tutoriales únicos y exclusivos sobre Divi y WordPress. ¡Únete ahora y aumenta al 200% tus habilidades de diseño web con Divi!

Tutoriales Relacionados

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$10 USD / mes

Pin It on Pinterest