CSSのclip-pathでコンテンツを丸く切り抜く

マテリアルデザインの、ボタンが円形に広がりコンテンツ表示領域となるエフェクトを作りたくて
画像ではなくテキストやその他のタグも含んだ要素をマスキングするclip-pathの使い方を研究してみました。

See the Pen CSS “clip-path” Mask by webdev (@webdev-jp-net) on CodePen.0

サンプルは、マウスやtouchemoveにあわせて円が狭くなり追従し、クリックで円が広がります。

clip-pathで円形にマスキング

円の直径、表示位置のページ左上からのXY座標を指定すると、SVGの円で切り抜いた形状にマスキングできます。

clip-path: circle(円の直径 at X座標 Y座標);

円形のcircleのほか、insetpolygonなども指定できます。

参考:
clip-path – CSS: カスケーディングスタイルシート | MDN

JavaScriptでoffsetを反映すれば追従

JavaScriptでclip-pathの値にoffsetX, offsetYをはめ込めば、
マウスやスワイプ、タップしたポイントにあわせてマスクを設置できます。

Android 4.4対応する場合はベンダープリフィックスが必要

Android 4.4を対象とする場合は、-webkit-clip-pathとベンダープリフィックスが必要です。

関連記事