噗☁️！使用此程式碼技術使 Web 元素像魔法一樣消失

使用不透明度、縮放、平移、甚至可見性和顯示將Web 元素從一種狀態轉換到另一種狀態的想法已經變得非常普通和陳舊，雖然它並沒有那麼糟糕，但它必須前進，邁出新的一步，成為別的東西，今天我向您介紹一種類似魔法的靈感效果，可以使用任何東西（例如字母、矩形、圓形，甚至圖像的採樣粒子）將元素消失！ （你能想像嗎）。

因此，我們的想法是將我們的元素更改為某種部件，如果它是像標題這樣的文本元素，那麼這些部件可能來自它，它們將是字母，如果它是圖像，它們將被採樣為彩色粒子，現在下面的CodePen 顯示了創建效果的基本概念：

如您所看到的，上面的範例顯示部件居中，並且當它們被動畫化時，它們使用以下實用函數從居中位置轉換為隨機位置：

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

但是現在為了實現Poof效果，我們需要在粒子動畫之前隱藏我們的初始元素，我使用縮放來隱藏它，這種縮放也會影響我們的粒子，為了防止我們需要創建一個元素來包含我們的粒子，這個元素必須與我們的初始元素相似，當我們完成初始元素的縮放動畫和粒子中每個粒子的噗噗動畫完成後，我們將刪除初始元素以及包含我們的粒子的元素

請注意，我創建了2 個數組，一個用於粒子“命名部分”，一個用於動畫，第二個數組將傳遞給Promise.all 方法來計算動畫的完成情況，而無需使用硬-編碼的setTimouts

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

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

如果我們將粒子絕對定位在類似網格的形式而不是居中位置，並且這種形式將位於行和列中，使用主for 循環來定位行並使用嵌套的for 循環來定位，會發生什麼欄位

效果完成了！但是使用雲圖像而不是彩色矩形怎麼樣，甚至用初始元素的顏色對其進行著色，使用兩個堆疊的背景圖像，一個是初始元素顏色的線性漸變，第二個是雲的實際圖像，然後應用乘法的背景混合模式，以及使用雲的遮罩影像遮罩粒子元素

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

---

正如我在文章第一篇中所說，圖像有一種poof 效果，它使用其像素從中採樣顏色，然後將這些顏色用於粒子，因此這種圖像的poof 效果將是我們即將發表的文章

如果你來到這裡，這意味著你已經閱讀完畢，並且對這類東西有某種痴迷，所以透過點讚/愛來表達吧❤️。

追蹤我了解更多？ ✅
開發者
推特/X
領英

以上是噗☁️！使用此程式碼技術使 Web 元素像魔法一樣消失的詳細內容。更多資訊請關注PHP中文網其他相關文章！