A ideia de fazer a transição de elementos da Web de um estado para outro usando opacidade, escala, tradução e até visibilidade e exibição, tornou-se muito comum e antiga, embora não seja tão ruim, mas é tem que seguir em frente, dar um novo passo, ser outra coisa, e hoje apresento a vocês um efeito inspirado em magia que elimina o elemento usando qualquer coisa como letras, retângulos, círculos e até mesmo partículas amostradas de uma imagem! (você poderia imaginar).

Então a ideia é mudar nosso elemento para algum tipo de partes, e essas partes podem vir dele se for um elemento de texto como Títulos, elas serão letras, e se for uma imagem, serão amostras de partículas coloridas, agora este CodePen abaixo mostra o conceito básico de criação do efeito:

Como você pode ver, o exemplo acima mostra que as partes estão centralizadas e quando estão sendo animadas elas são transformadas desta posição centralizada para uma posição aleatória usando uma função utilitária como esta:

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

Mas agora para conseguir o Efeito Poof, precisamos ocultar nosso elemento inicial logo antes de animar as partículas, usei escala para ocultá-lo, esse dimensionamento também afetará nossas partículas, para evitar que precisaremos crie um elemento para conter nossas partículas, e este elemento deve ser semelhante ao nosso elemento inicial, e após terminarmos a animação de escalonamento do elemento inicial e a animação poofing de cada partícula das partículas concluída, iremos remover o elemento inicial junto com o elemento que contém nossas partículas

Observe que eu criei 2 arrays, um para as partículas "partes nomeadas" e outro para animações, esse segundo array será passado para um método Promise.all para descobrir o acabamento da animação sem usar hard- setTimouts codificados

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

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

O que poderia acontecer se posicionarmos nossas partículas absolutamente em uma forma de grade em vez de em uma posição centralizada, e esta forma estará em linhas e colunas, usando um loop for principal para posicionar linhas e um loop for aninhado para posicionar colunas

O efeito acabou! mas que tal usar uma imagem de nuvem em vez do retângulo colorido, e até mesmo colori-la com a cor do elemento inicial, usando 2 imagens de fundo empilhadas, uma é o gradiente linear da cor do elemento inicial, a segunda é a imagem real da nuvem, então aplique um modo de mesclagem de fundo de multiplicação, junto com o mascaramento do elemento de partícula com uma imagem de máscara da nuvem

                    --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 eu disse no início do artigo, que existe um efeito poof para imagens que usa seus pixels para obter amostras de cores e depois usa essas cores para partículas. Portanto, esse efeito poof para imagens será nosso próximo artigo

Se você veio até aqui, significa que concluiu a leitura e tem algum tipo de obsessão por esse tipo de coisa, então demonstre deixando um like/love ❤️.

Siga-me para mais informações ?✅
dev.para
Twitter/X
Linkedin