LoginSignup
12

More than 5 years have passed since last update.

CSS animation で遊び倒す - CSS Clip Path-

Last updated at Posted at 2019-03-15

CSS animation day 52 となりました。

以前の記事 にて、画像を切り取る方法として、mask プロパティをご紹介しました。

本日は別の手段である、clip-path プロパティについて、ご紹介いたします。

1. 完成版

See the Pen SAKURA by hiroya iizuka (@hiroyaiizuka) on CodePen.

2. 参考文献

CSS Clip Path Hover Circle Hover Effects | Html CSS
CSS Clip-Path Maker
Introduction to Clipping Using clip-path in CSS

3. 分解してみる

❶.
マークアップしましょう。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="picture"></div>
    </div>
  </body>
</html>
styles.scss
body {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.picture {
  width: 100%;
  height: 100%;
  background: url("../img/wa.png");
  background-repeat: no-repeat;
  background-size: cover;
}

スクリーンショット 2019-03-15 15.56.08 (1) (1).png

綺麗ですね。


❷.
では、clip-path プロパティを使いましょう。

styles.scss

.picture {
  width: 100%;
  height: 100%;
  background: url("../img/wa.png");
  background-attachment: fixed;
  background-size: cover;
  clip-path: circle(40%);
}

スクリーンショット 2019-03-15 16.11.54 (1) (1).png

一気に、和の感じが出ました。おしゃれですね! Clip-Path プロパティを解説します。

Clip- Path (参考文献:MDN)

要素の 「どの部分を表示するか?」 を設定するクリッピング領域を作るプロパティです。
領域の内部は表示され、外部は非表示になります。

clip-path: <> には、polygon や circle、ellipse などのジオメトリ値や、SVGの clip-path 要素を指定するurl を入れることができます。また、

参考文献のジェネレーターを使えば、自分の思い通りの形で画像を切ることができるでしょう。早速、使ってみましょう。
スクリーンショット 2019-03-15 16.35.00.png

楕円を作りました。左下にあるコードをコピーし、自分のCSSに貼り付けます。

styles.scss

.picture {
  width: 100%;
  height: 100%;
  background: url("../img/wa.png");
  background-attachment: fixed;
  background-size: cover;
  clip-path: ellipse(47% 57% at 71% 73%);
}

スクリーンショット 2019-03-15 16.37.54 (1).png

思い通りの形に、画像をクリッピングできました。
他にも、吹き出しの形だったり、星の形があったりするので、Web サイトの見出しや挿入に使えますね。


❸.
clip-path について、もう少し深くみていきましょう。

clip-path: ellipse(130px 140px at 10% 20%);

at を使うことで、 position の位置を決めることができます。
(position: absolute のときと同じ配置の決め方です。)

スクリーンショット 2019-03-15 16.51.45 (1).png

左上が、 clip-path: ellipse(47% 57%  at  0%  0%);
右下が、 clip:path: ellipse(47% 57%   at 80% 100%);
となります。


❹.
では、アニメーションを作っていきましょう。
このat ~ をkeyframe で動かします。

styles.scss
body {
  margin: 0;
  padding: 0;
  background: linear-gradient(to right, #200122, #6f0000); // 変更
}
.picture {
  width: 100%;
  height: 100%;
  background: url("../img/wa.png");
  background-attachment: fixed;
  background-size: cover;
  clip-path: circle(40%);
  animation: clipmove 12s ease-in-out infinite;
}

@keyframes clipmove {
  0%,
  100% {
    clip-path: circle(10% at 0 0);
  }

  50% {
    clip-path: circle(80% at 100% 100%);
  }
}

See the Pen SAKURA by hiroya iizuka (@hiroyaiizuka) on CodePen.

このように、clip-path プロパティのおかげで、photoshop のような画像操作ができて、大変素晴らしいですね。 

それでは、また明日〜

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12