La idea de hacer la transición de elementos web de un estado a otro usando opacidad, escala, traducción, incluso visibilidad y visualización, se ha vuelto muy común y antigua, aunque no es tan mala, pero tiene que avanzar, dar un nuevo paso, ser algo más, y hoy les presento un efecto mágico inspirado que elimina el elemento usando cualquier cosa como letras, rectángulos, círculos e incluso partículas de muestra de una imagen. (¿te imaginas?).

Entonces la idea es cambiar nuestro elemento para que sea algún tipo de partes, y esas partes pueden provenir de él, si es un elemento de texto como Encabezados, serán letras, y si es una imagen, serán partículas de colores de muestra. Ahora Este CodePen a continuación muestra el concepto básico de creación del efecto:

Como puede ver, el ejemplo anterior muestra que las partes están centradas y cuando se animan, se transforman de esta posición centrada a una posición aleatoria usando una función de utilidad como esta:

const rand = (min, max) => Math.floor(Math.random() * (max - min)   min)

Pero ahora para lograr el efecto Poof, necesitamos ocultar nuestro elemento inicial justo antes de animar las partículas, usé escala para ocultarlo, esta escala también afectará nuestras partículas, para evitar eso necesitaremos crear un elemento para contener nuestras partículas, y este elemento tiene que ser similar a nuestro elemento inicial, y después de que terminemos la animación de escala del elemento inicial y la animación de poofing de cada partícula de las partículas, eliminaremos el elemento inicial junto con el elemento que contiene nuestras partículas

Tenga en cuenta que he creado 2 matrices, una para las partículas "partes nombradas" y otra para las animaciones. Esta segunda matriz se pasará a un método Promise.all para determinar el acabado de la animación sin usar hardware. setTimouts codificados

  const div = document.querySelector("div");
        let parts = [];
        let animations = [];

return Promise.all(animations.map(animation => animation.finished)).then(() => {
                div.remove()
                poof.remove()
            })

¿Qué podría pasar si posicionamos nuestras partículas absolutamente en forma de cuadrícula en lugar de en una posición centrada, y esta forma será en filas y columnas, usando un bucle for principal para posicionar las filas y un bucle for anidado para posicionar? columnas

¡El efecto está terminado! pero ¿qué tal usar una imagen de nube en lugar del rectángulo coloreado, e incluso colorearla con el color del elemento inicial, usando 2 imágenes de fondo apiladas, una es un gradiente lineal del color del elemento inicial, la segunda es la imagen real de la nube, luego aplica? un modo de fusión de fondo de multiplicar, además de enmascarar el elemento de partículas con una imagen de máscara de la nube

                    --cloud: 
url(https://static.vecteezy.com/system/resources/thumbnails/013/994/726/small/white-3d-cloud-png.png);
                    position: absolute;
                    width: 50px;
                    height: 50px;
                    background: linear-gradient(crimson, crimson) no-repeat center / contain, var(--cloud) no-repeat center / contain;
                    background-blend-mode: multiply;
                    mask: var(--cloud) no-repeat center / contain;
                    top:50%;
                    left: 50%;
                    translate: -50% -50%; 
                    `

Como dije en el primero del artículo, hay un efecto poof para imágenes que usa sus píxeles para tomar muestras de colores y luego usa estos colores para partículas, por lo que este efecto poof para imágenes será nuestro próximo artículo

Si viniste aquí, esto significa que completaste la lectura y tienes algún tipo de obsesión con este tipo de cosas, así que muéstralo dejando un me gusta/me encanta ❤️.

¿Sígueme para más? ✅
dev.a
Twitter/X
linkedin