不透明度、拡大縮小、変換、可視性や表示さえも使用して、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%; 
                    `

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

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

もっとフォローしてください?✅
開発者
ツイッター/X
リンク済み