L'idée de faire passer des éléments Web d'un état à un autre en utilisant l'opacité, l'échelle, la traduction, voire la visibilité et l'affichage, est devenue très ordinaire et ancienne, même si ce n'est pas si mal, mais ça doit avancer, franchir une nouvelle étape, être autre chose, et aujourd'hui je vous présente un effet inspiré par la magie qui fait disparaître l'élément en utilisant n'importe quoi comme ses lettres, ses rectangles, ses cercles, même les particules échantillonnées d'une image ! (pourriez-vous imaginer).

Donc, l'idée est de changer notre élément pour en faire une sorte de parties, et ces parties peuvent en provenir si c'est un élément de texte comme les titres, ce seront des lettres, et si c'est une image, ce seront des particules colorées échantillonnées, maintenant ce CodePen ci-dessous montre le concept de base de la création de l'effet :

Comme vous pouvez le voir, l'exemple ci-dessus montre que les pièces sont centrées et lorsqu'elles sont animées, elles sont transformées de cette position centrée en position aléatoire à l'aide d'une fonction utilitaire comme celle-ci :

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

Mais maintenant, pour obtenir l'effet Poof, nous devons masquer notre élément initial juste avant d'animer les particules, j'ai utilisé une échelle pour le masquer, cette mise à l'échelle affectera également nos particules, afin d'éviter que nous devions créer un élément pour contenir nos particules, et cet élément doit être similaire à notre élément initial, et une fois l'animation de mise à l'échelle de l'élément initial terminée et l'animation de pouf de chaque particule des particules terminée, nous supprimerons l'élément initial avec l'élément qui contient nos particules

Notez que j'ai créé 2 tableaux, un pour les particules "parties nommées" et un pour les animations, ce deuxième tableau sera transmis à une méthode Promise.all pour déterminer la finition de l'animation sans utiliser de hard- setTimouts codé

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

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

Que pourrait-il arriver si nous positionnons nos particules de manière absolue sous une forme semblable à une grille plutôt que dans une position centrée, et cette forme sera en lignes et en colonnes, en utilisant une boucle for principale pour positionner les lignes et une boucle for imbriquée pour positionner colonnes

L'effet est terminé ! mais qu'en est-il d'utiliser une image de nuage au lieu du rectangle coloré, et même de la colorer avec la couleur de l'élément initial, en utilisant 2 images d'arrière-plan empilées, l'une est un dégradé linéaire de la couleur de l'élément initial, la seconde est l'image réelle du nuage, puis appliquez un mode de fusion d'arrière-plan de multiplication, ainsi que le masquage de l'élément de particule avec une image de masque du nuage

                    --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%; 
                    `

Comme je l'ai dit dans le premier de l'article, il existe un effet pouf pour les images qui utilise ses pixels pour en échantillonner les couleurs, puis utilise ces couleurs pour les particules. Cet effet pouf pour les images sera donc notre prochain article

Si vous êtes venu ici, cela signifie que vous avez terminé la lecture et que vous avez une sorte d'obsession pour ce genre de choses, alors montrez-le en laissant un like/love ❤️.

Suivez-moi pour en savoir plus ?✅
dev.to
Twitter/X
lié