ふーん☁️！このコードテクニックを使って Web 要素を魔法のように消す

不透明度、拡大縮小、変換、可視性や表示さえも使用して、Web 要素をある状態から別の状態に遷移させるというアイデアは、それほど悪くはありませんが、非常に普通で古くなりました。前進し、新たな一歩を踏み出し、何か他のものにならなければなりません。今日は、文字、長方形、円、さらには画像のサンプリングされた粒子など、あらゆるものを使用して要素を遠ざける、魔法のようなインスピレーションを受けたエフェクトを紹介します。 (想像できますか)。

つまり、要素をある種のパーツに変更するというアイデアです。見出しなどのテキスト要素の場合は文字になり、画像の場合はサンプリングされた色の粒子になります。以下の CodePen は、エフェクト作成の基本概念を示しています:

ご覧のとおり、上の例はパーツが中央に配置されており、アニメーション化されるときに、次のようなユーティリティ関数を使用してパーツがこの中央の位置からランダムな位置に変換されていることを示しています。

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

しかし、プーフ効果を実現するには、パーティクルをアニメーション化する直前に最初の要素を非表示にする必要があります。私はそれを隠すためにスケールを使用しました。このスケーリングはパーティクルにも影響します。これを防ぐには、次の操作が必要になります。パーティクルを含む要素を作成します。この要素は最初の要素と似ている必要があります。最初の要素のスケーリング アニメーションが終了し、パーティクルの各パーティクルのプーフィング アニメーションが終了した後、最初の要素を削除します。パーティクルを含む要素

2 つの配列を作成したことに注意してください。1 つはパーティクルの「名前付きパーツ」用、もう 1 つはアニメーション用です。この 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 ループを使用して配置するとどうなるでしょうか。列

エフェクトは完成しました!しかし、色付きの長方形の代わりに雲の画像を使用し、最初の要素の色で色付けするのはどうでしょうか。2 つの積み重ねられた背景画像を使用して、1 つは最初の要素の色の線形グラデーション、2 番目は実際の雲の画像を使用して、適用します。乗算の背景ブレンド モードと、雲のマスク イメージでパーティクル要素をマスクします

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

---

記事の最初で述べたように、画像のピクセルを使用して色をサンプリングし、その色をパーティクルに使用する画像のプーフ効果があるということです。したがって、この画像のプーフ効果は次の記事になります

ここに来たということは、あなたが読み終えて、この種のものに対してある種の執着を持っていることを意味します。したがって、いいね/愛 ❤️ をドロップしてそれを示してください。

もっと知りたい方はフォローしてください?✅
dev.to
twitter/X
リンクイン

以上がふーん☁️！このコードテクニックを使って Web 要素を魔法のように消すの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。