Vamos a ver cómo hacer con Divi un rompecabezas que se arma cuando bajamos en la página.

Se trata de una animación interesante que puede tener tantas variantes como aplicaciones se te ocurran. Y lo uso de escusa para mostrarte como funciona la característica Efectos de Scroll de Divi.

En la imagen vemos cómo se ve nuestro rompecabezas cuando vamos bajando y las partes entran en la pantalla.

Y así es como queda armado totalmente una vez que la imagen ingresó completamente en la pantalla.

Para crear esta animación vamos a usar los efectos de scroll de Divi que se encuentran en la pestaña Avanzado de cada elemento.

Dale play al video para ver paso a paso cómo hacerlo. Más abajo te dejo los valores que utilicé en la configuración de la animación.

Dividir la imagen original

Lo primero que tenemos que hacer es dividir la imagen original en las partes que necesitemos. Esto hay que hacerlo con un editor de imágenes antes de comenzar a trabajar con Divi.

Yo para este ejemplo dividí la imagen en 8 partes pero ésto depende de las dimensiones de tu foto.

Una vez que tenemos las piezas del rompecabezas las subimos a la Biblioteca de medios así están disponibles para usarlas con Divi.

Ahora sí, vayamos al editor Divi de la página donde vamos a insertar nuestro puzzle y comencemos a crear.

Insertar las piezas del puzzle

Lo primero que hay que hacer es comenzar a armar el rompecabezas dentro de la página.

Para ésto voy a insertar una nueva sección y dentro de ella una fila con estructura de 4 columnas. Y voy insertando un módulo de Imagen en cada columna para colocar la pieza que corresponde a cada posición.

Es necesario entrar a los ajustes de la fila y hacer la siguiente configuración para eliminar el espacio que queda entre las partes del puzzle.

En la pestaña Diseño vamos a Tamaño y configuramos:

• Uso Personalizado del Canalón de Ancho: Sí.
• Espacio entre columnas: 1.

Una vez que tenemos armado nuestro puzzle lo que tenemos que hacer es aplicarle una rotación a las piezas. Porque lo que queremos es que alcancen su posición correcta luego de la animación y no antes.

Rotar las partes

Para que las piezas del puzzle adopten su posición correcta luego de la animación que vamos a configurar tenemos que desordenarlas primero.

En este caso lo que voy a hacer es rotarlas en diferentes sentidos. Voy a usar para ésto la selección múltiple de Divi, seleccionando en primer lugar un grupo de piezas intercaladas.

La selección múltiple de Divi es más fácil de usar en la vista de esquema del editor, por eso te recomiendo cambiar a ésta.

Para seleccionar varios elementos con Divi debes mantener presionada la tecla Ctrl o Cmd e ir haciendo clic sobre cada elemento.

Después de seleccionar ingresamos a los ajustes de cualquiera de ellos.

En Transformar vamos a la pestaña Rotación y aplicamos una rotación de 90 grados.

Después hacemos lo mismo con las imágenes restantes pero aplicándoles una rotación de -90 grados.

Esto es para girarlas en sentido contrario.

Y así nos queda ahora el rompecabezas desarmado, con algunas piezas rotadas en un sentido y otros en el sentido contrario.

Ahora que ya tenemos nuestro puzzle desordenado vamos a configurar la animación.

Efecto de Scroll de Rotación

Para crear la animación vamos a usar los efectos de scroll de Divi.

En primer lugar vamos a seleccionar las piezas del primer grupo (rotadas 90 grados) y vamos aplicarles un efecto de scroll de rotación para colocarlas en su posición correcta cuando el usuario baja en la página.

Pestaña Avanzado sección Scroll Effects.

• Enable Rotating: Sí.
• Starting Rotation: 0 grados.
• Mid Rotation: -90 grados.
• Ending Rotations: -90 grados.
• Mid: 40%.
• Motion Effect Trigger: Bottom of Element.

Luego seleccionamos el segundo grupo de piezas (rotadas -90 grados) y aplicamos los siguientes valores.

Pestaña Avanzado sección Scroll Effects.

• Enable Rotating: Sí.
• Starting Rotation: 0 grados.
• Mid Rotation: 90 grados.
• Ending Rotations: 90 grados.
• Mid: 40%.
• Motion Effect Trigger: Bottom of Element.

Y ahora ésto es lo que pasa cuando las piezas de nuestro rompecabeza entran en la pantalla.

Las piezas que originalmente están rotadas a 90 y -90 giran hasta llegar a su posición correcta.

Vamos a pulir un poco la animación.

Efecto de Scroll Fade-in

Seleccionamos con la selección múltiple de Divi todas las piezas y vamos a aplicarles un efecto de scroll fade-in para que, además de rotar, vayan aumentando su opacidad a medida que ingresan en la página.

Pestaña Avanzado sección Scroll Effects:

• Enable Fading in and out: Sí.
• Starting Opacity: 50%.
• Mid Opacity: 100%.
• Ending Opacity: 100%.
• Mid: 30%.

Efecto de Scroll de Escala

Ahora vamos a mejorar aún más la animación combinando un tercer efecto de scroll.

Pestaña Avanzado sección Scroll Effects:

• Enable Scaling Up and Down: Sí.
• Starting escale: 50%.
• Mid escale: 100%.
• Ending escale: 100%.
• Mid: 30%.

El resultado

Y así es como nos queda la animación terminada.

Cuando las piezas de nuestro puzzle ingresan por la parte inferior de la pantalla comienzan a rotar para adoptar su posición definitiva.

Asimismo van aumentando en opacidad y tamaño hasta llegar a los valores óptimos originales.

Espero que te hayan gustado. Dejame debajo un comentario contándome que te parecieron estas características y posibilidades de Divi.

Ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.