JSはclip-pathを使用して動的領域クリッピング機能を実装します

背景

今日、CodePen を閲覧していたところ、非常に興味深い効果を見つけました。

CodePen デモ - Bennett Feely によるマテリアルデザインメニュー

この効果については、まだ調査して学ぶ価値のある点がいくつかあります。以下で見てみましょう。

同様の効果を得るにはどうすればよいでしょうか?

まず、考えてみてください。もし上記の効果を達成するように求められたら、あなたはどうしますか?

ここで、考えられる解決策をいくつか簡単に挙げます。

ボックスシャドウ
放射状グラデーション
スケーリング変換: scale()

一つずつ素早く確認してみましょう。

ボックスシャドウの使用

box-shadowを使用する場合、コードはおおよそ次のようになります。

<div class="g-container">
    <div class="g-item"></div>
</div>

.g-コンテナ{
    位置: 相対的;
    幅: 400ピクセル;
    高さ: 300px;
    オーバーフロー: 非表示;
}

.g-アイテム{
    位置: 絶対;
    幅: 48px;
    高さ: 48px;
    境界線の半径: 50%;
    背景: #fff;
    上: 20px;
    左: 20px;
    ボックスシャドウ: 0 0 0 0 #fff;
    遷移: box-shadow .3s 線形;
    
    &:ホバー{
        ボックスシャドウ: 0 0 0 420px #fff;
    }
}

核となるのは:

外側の層はoverflow: hideen set
内部要素にマウスオーバーすると、 box-shadow: 0 0 0 0 #fff box-shadow: 0 0 0 420px #fffへの変更が実現されます。

効果は以下のとおりです。

アニメーション全体はシミュレートされていますが、致命的な問題が 2 つあります。

マウスが円から離れると、アニメーション全体が逆方向に動き始め、白い領域が消え始めます。ボタン操作を実行したい場合、完了しません。
アニメーションが展開された後に四角形内に隠れた要素を配置するのは簡単ではありません

したがって、 box-shadow見た目は良いものの、諦めなければなりません。 CodePen デモ - ボックスシャドウのズームインアニメーション

放射状グラデーションを使用して

次に、 radial-gradientと CSS @property を使用して上記の効果を復元できます。

<div class="g-container"></div>

@property --size {
  構文: '<長さ>';
  継承: false;
  初期値: 24px;
}

.g-コンテナ{
    位置: 相対的;
    幅: 400ピクセル;
    高さ: 300px;
    オーバーフロー: 非表示;
    背景: 放射状グラデーション(円、44px 44px、#fff 0、#fff var(--size)、透明 var(--size)、透明 0);
    遷移: --size .3s 線形;
    
    &:ホバー{
        --サイズ: 450px;
    }
}

放射状グラデーションアニメーション効果を制御することで、ホバー時に元の小さな円の背景を大きな円の背景に変更できます。効果は次のとおりです。

うーん、確かに効果は回復しましたが、問題も致命的です:

背景の変更なので、マウスを小さな円の上に置く必要はなく、div の範囲に入るだけでアニメーションが開始されます。これは明らかに間違っています。
最初のbox-shadow方式と同様に、白の下に隠れたナビゲーション要素の DOM を配置するのは簡単ではありません。

CodePen デモ - 放射状グラデーションのズームインアニメーション

えーっと、スケーリングtransform: scale()使用する別の方法もありますが、いくつか問題もあるので、ここでは詳しく説明しません。

したがって、上記の効果を実現したい場合の核心は次のとおりです。

マウスを円の上に移動するとアニメーションが始まります。拡大された範囲内でマウスを自由に動かしてもアニメーション効果は縮小されません。
アニメーションが展開された後、内部のDOMの配置はそれほど面倒ではありません。Javascriptを使わずに内部のコンテンツの表示と非表示を制御できればベストです。

クリップパスを使用して動的な領域クリッピングを実現する

したがって、ここでは実際に動的な領域の切り取りが必要になります。

私のこの記事では、overflow: hidden を使用せずに overflow: hidden を実装する方法を説明します。では、CSS で要素をクリップするいくつかの方法が紹介されていますが、その中でもこの効果に最も適しているのは clip-path です。

clip-pathを使用すると、動的クリッピングを非常にうまく実装でき、コードも非常にシンプルになります。

<div class="g-container"></div>

.g-コンテナ{
    位置: 相対的;
    幅: 400ピクセル;
    高さ: 300px;
    オーバーフロー: 非表示;
    トランジション: クリップパス .3s 線形;
    クリップパス: 円(20px、44px、44px);
    背景: #fff;
    
    &:ホバー{
        クリップパス: 円(44px 44px で 460px);
    }
}

最初にclip-path clip-path: circle(20px at 44px 44px)を使用して、長方形の div を円にクリップする必要があります。ホバーすると、クリッピング円の半径を長方形の範囲全体に拡張できます。

効果は以下のとおりです。

この方法では、タイトル画像の効果を完璧に実現でき、組み込みの DOM 要素をこの div に直接書き込むことができます。

<div class="g-container">
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</div>

効果は以下のとおりです。

CodePen デモ - クリップパスのズームインアニメーション

これは、クリップパスを使用して動的な領域クリッピングを実現する非常に興味深いテクニックです。誰もがこれをマスターできることを願っています。

JS で clip-path を使用して動的な領域クロッピングを実装する方法についての記事はこれで終わりです。clip-path 領域クロッピングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: