Die Idee, Webelemente mithilfe von Deckkraft, Skalierung, Übersetzung und sogar Sichtbarkeit und Anzeige von einem Zustand in einen anderen zu überführen, ist sehr alltäglich und alt geworden, obwohl es nicht so schlimm ist, aber es muss vorwärts gehen, einen neuen Schritt machen, etwas anderes sein, und heute stelle ich Ihnen einen magisch inspirierten Effekt vor, der das Element durch alles wie Buchstaben, Rechtecke, Kreise und sogar gesampelte Partikel eines Bildes verdrängt! (Könnten Sie sich das vorstellen).

Die Idee besteht also darin, unser Element so zu ändern, dass es aus Teilen besteht, und diese Teile können daraus stammen, wenn es sich um ein Textelement wie „Überschriften“ handelt, sind es Buchstaben, und wenn es sich um ein Bild handelt, handelt es sich um abgetastete farbige Partikel Dieser CodePen unten zeigt das Grundkonzept zum Erstellen des Effekts:

Wie Sie sehen können, zeigt das obige Beispiel, dass die Teile zentriert sind und wenn sie animiert werden, wurden sie mithilfe einer Hilfsfunktion wie dieser von dieser zentrierten Position in eine zufällige Position umgewandelt:

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

Aber jetzt müssen wir, um den Poof-Effekt zu erzielen, unser ursprüngliches Element ausblenden, kurz bevor wir die Partikel animieren. Ich habe die Skalierung verwendet, um es auszublenden. Diese Skalierung wirkt sich auch auf unsere Partikel aus, um dies zu verhindern Erstellen Sie ein Element, das unsere Partikel enthält. Dieses Element muss unserem ursprünglichen Element ähneln. Nachdem wir die Skalierungsanimation des ursprünglichen Elements und die Poofing-Animation jedes Partikels der Partikel abgeschlossen haben, werden wir das ursprüngliche Element zusammen mit entfernen das Element, das unsere Partikel enthält

Beachten Sie, dass ich zwei Arrays erstellt habe, eines für die „benannten Teile“ der Partikel und eines für Animationen. Dieses zweite Array wird an eine Promise.all-Methode übergeben, um die Fertigstellung der Animation ohne Verwendung von Hard- zu ermitteln. codierte setTimouts

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

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

Was könnte passieren, wenn wir unsere Partikel absolut in einer gitterartigen Form statt in einer zentrierten Position positionieren und diese Form in Zeilen und Spalten vorliegt, wobei wir eine Haupt-for-Schleife zum Positionieren von Zeilen und eine verschachtelte for-Schleife zum Positionieren verwenden? Spalten

Der Effekt ist fertig! Aber wie wäre es, wenn Sie anstelle des farbigen Rechtecks ​​ein Wolkenbild verwenden und es sogar mit der Farbe des ursprünglichen Elements einfärben, indem Sie zwei gestapelte Hintergrundbilder verwenden, eines ist ein linearer Farbverlauf der Farbe des ursprünglichen Elements, das zweite ist das tatsächliche Bild der Wolke, und wenden Sie es dann an ein Hintergrund-Mischmodus zum Multiplizieren, zusammen mit der Maskierung des Partikelelements mit einem Maskenbild der Wolke

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

Wie ich im ersten Teil des Artikels sagte, gibt es einen Poof-Effekt für Bilder, der seine Pixel verwendet, um Farben daraus abzutasten und diese Farben dann für Partikel zu verwenden. Dieser Poof-Effekt für Bilder wird also unser kommender Artikel sein

Wenn Sie hierher gekommen sind, bedeutet das, dass Sie mit dem Lesen fertig sind und eine Art Obsession mit solchen Dingen haben. Zeigen Sie es also, indem Sie ein „Gefällt mir“/einen „Lieben“ hinterlassen ❤️.

Folge mir für mehr ?✅
dev.to
twitter/X
LinkedIn