clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション3選

今回はclip path polygonを応用して2枚の画像を半々(三角形)で表示するCSSアニメーションをご紹介。それぞれに違ったエフェクトがついています。実務で使えます。まずは【見てください】
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。

 

1. 【ぼやけるアニメーション】clip path : polygon+filter : blur

動きは下の画像のような感じになります

コードを見る
<div class="images">
  <div class="image-one"></div>
  <div class="image-two" ></div>
</div>
div {
  /* 要素全体の位置指定 */
  position: absolute;
  margin-left: 25%;
}
.image-one {
  /* 画像のサイズ指定 */
  width: 400px;
  height: 300px;
  /* 背景画像の指定 */
  background: url('https://images.unsplash.com/photo-1508402476522-c77c2fa4479d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80');
  /* 背景画像が繰り返さないように指定 */
  background-repeat:no-repeat;
  /* 背景画像が枠全体を覆うように指定 */
  background-size:cover;
  /* 背景画像を枠の真ん中に配置する */
  background-position:center;
  /* カーソル外した際のアニメーション速度調整 */
  transition: 1s;
    /* フィルターにてぼやけ度合いの調整 */
  filter: blur(3px);
}
.image-one:hover {
  /* フィルターにてぼやけ度合いの調整 */
  filter: blur(0);
  /* カーソルを乗せた際のアニメーション速度調整 */
  transition: 1s;
  /* .image-oneを画面いっぱいに広げる */
  z-index: 100;
}
.image-two {
  /* 画像の切り抜き調整 */
  clip-path: polygon(400px 0, 0% 300px, 400px 400px);
  /* 背景画像の指定 */
  background: url('https://images.unsplash.com/photo-1445297983845-454043d4eef4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80');
    /* 画像のサイズ指定 */
  width: 400px;
  height: 300px;
  /* 背景画像が繰り返さないように指定 */
  background-repeat:no-repeat;
  /* 背景画像が枠全体を覆うように指定 */
  background-size:cover;
  /* 背景画像を枠の下部に配置する */
  background-position:bottom;
  /* カーソル外した際のアニメーション速度調整 */
  transition: 1s;
  /* フィルターにてぼやけ度合いの調整 */
  filter: blur(3px);
}
.image-two:hover {
  /* フィルターにてぼやけ度合いの調整 */
  filter: blur(0);
    /* カーソルを乗せた際のアニメーション速度調整 */
  transition: 1s;
  /* .image-twoを画面いっぱいに広げる */
  clip-path: none;
}
ここがポイント!
  1. 重ね合わせる画像を2枚(image-one & image-two)指定
  2. image-one & image-twoで背景画像の繰り返しなし(background-repeat)・枠内を覆う(background-size)指定
  3. image-twoのみclip-path: polygonで画像を切り抜く(三角形に)+background-position:bottomで下部に配置
  4. filter:blur()で要素をぼやけさせる
  5. transitionを指定することでhoverした際に滑らかなアニメーションを実現

 

2. 【美しいアニメーション】clip path : polygon+filter : grayscale contrast saturate

動きは下の画像のような感じになります

コードを見る
<div class="images">
  <div class="image-one"></div>
  <div class="image-two" ></div>
</div>
div {
  /* 要素全体の位置指定 */
  position: absolute;
  margin-left: 25%;
}
.image-one {
  /* 画像のサイズ指定 */
  width: 400px;
  height: 300px;
  /* 背景画像の指定 */
  background: url('https://images.unsplash.com/photo-1508402476522-c77c2fa4479d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80');
  /* 背景画像が繰り返さないように指定 */
  background-repeat:no-repeat;
  /* 背景画像が枠全体を覆うように指定 */
  background-size:cover;
  /* 背景画像を枠の真ん中に配置する */
  background-position:center;
  /* カーソル外した際のアニメーション速度調整 */
  transition: 1s;
  /* フィルターにて白黒・コントラスト・色彩調整 */
  filter: grayscale(.5) contrast(80%) saturate(100%);
}
.image-one:hover {
    /* フィルターにて白黒・コントラスト・色彩調整 */
  filter: grayscale(0) contrast(140%) saturate(160%);
    /* カーソルを乗せた際のアニメーション速度調整 */
  transition: 1s;
  /* .image-oneを画面いっぱいに広げる */
  z-index: 100;
}
.image-two {
  /* 画像の切り抜き調整 */
  clip-path: polygon(400px 0, 0% 300px, 400px 400px);
  /* 背景画像の指定 */
  background: url('https://images.unsplash.com/photo-1445297983845-454043d4eef4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80');
    /* 画像のサイズ指定 */
  width: 400px;
  height: 300px;
  /* 背景画像が繰り返さないように指定 */
  background-repeat:no-repeat;
  /* 背景画像が枠全体を覆うように指定 */
  background-size:cover;
  /* 背景画像を枠の下部に配置する */
  background-position:bottom;
  /* カーソル外した際のアニメーション速度調整 */
  transition: 1s;
    /* フィルターにて白黒・コントラスト・色彩調整 */
  filter: grayscale(.5) contrast(80%) saturate(100%);
}
.image-two:hover {
    /* フィルターにて白黒・コントラスト・色彩調整 */
  filter: grayscale(0) contrast(140%) saturate(120%);
    /* カーソルを乗せた際のアニメーション速度調整 */
  transition: 1s;
  /* .image-twoを画面いっぱいに広げる */
  clip-path: none;
}
ここがポイント!
  1. 重ね合わせる画像を2枚(image-one & image-two)指定
  2. image-one & image-twoで背景画像の繰り返しなし(background-repeat)・枠内を覆う(background-size)指定
  3. image-twoのみclip-path: polygonで画像を切り抜く(三角形に)+background-position:bottomで下部に配置
  4. filter:grayscale() contrast() saturate()で画像が美しく変化
  5. transitionを指定することでhoverした際に滑らかなアニメーションを実現

 

3. 【オーロラアニメーション】clip path : polygon+filter : grayscale saturate hue-rotate

動きは下の画像のような感じになります

コードを見る
<div class="images">
  <div class="image-one"></div>
  <div class="image-two" ></div>
</div>
div {
  /* 要素全体の位置指定 */
  position: absolute;
  margin-left: 25%;
}
.image-one {
  /* 画像のサイズ指定 */
  width: 400px;
  height: 300px;
  /* 背景画像の指定 */
  background: url('https://images.unsplash.com/photo-1508402476522-c77c2fa4479d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80');
  /* 背景画像が繰り返さないように指定 */
  background-repeat:no-repeat;
  /* 背景画像が枠全体を覆うように指定 */
  background-size:cover;
  /* 背景画像を枠の真ん中に配置する */
  background-position:center;
  /* カーソル外した際のアニメーション速度調整 */
  transition: 0.1s;
  /* フィルターにて白黒・彩度・色相回転調整 */
  filter: grayscale(1) saturate(100%) hue-rotate(0deg);
}
.image-one:hover {
  /* フィルターにて白黒・彩度・色相回転調整 */
  filter: grayscale(0) saturate(150%) hue-rotate(1440deg);
    /* カーソルを乗せた際のアニメーション速度調整 */
  transition: 3s;
  /* .image-oneを画面いっぱいに広げる */
  z-index: 100;
}
.image-two {
  /* 画像の切り抜き調整 */
  clip-path: polygon(400px 0, 0% 300px, 400px 400px);
  /* 背景画像の指定 */
  background: url('https://images.unsplash.com/photo-1445297983845-454043d4eef4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80');
    /* 画像のサイズ指定 */
  width: 400px;
  height: 300px;
  /* 背景画像が繰り返さないように指定 */
  background-repeat:no-repeat;
  /* 背景画像が枠全体を覆うように指定 */
  background-size:cover;
  /* 背景画像を枠の下部に配置する */
  background-position:bottom;
  /* カーソル外した際のアニメーション速度調整 */
  transition: 0.1s;
  /* フィルターにて白黒・彩度・色相回転調整 */
  filter: grayscale(1) saturate(100%) hue-rotate(0deg);
}
.image-two:hover {
  /* フィルターにて白黒・彩度・色相回転調整 */
  filter: grayscale(0) saturate(120%) hue-rotate(1440deg);
    /* カーソルを乗せた際のアニメーション速度調整 */
  transition: 3s;
  /* .image-twoを画面いっぱいに広げる */
  clip-path: none;
}
ここがポイント!
  1. 重ね合わせる画像を2枚(image-one & image-two)指定
  2. image-one & image-twoで背景画像の繰り返しなし(background-repeat)・枠内を覆う(background-size)指定
  3. image-twoのみclip-path: polygonで画像を切り抜く(三角形に)+background-position:bottomで下部に配置
  4. filter:grayscale() saturate() hue-rotate()で画像がオーロラのように変化
  5. transitionを指定することでhoverした際に滑らかなアニメーションを実現

 

追記

スライダーマテリアルデザインをコピペで!CSSアニメーション3選【コード解説付】
transitionとfilterで美しく変化するCSS画像エフェクト5選(基礎から応用まで)
こちらの記事を追加でご覧いただくことでよりWebデザインスキルの向上ができるかと思います

今回のマテリアルデザインとは一味違い本格的なアニメーションデザインなのでより一層楽しんでいただけるかと思います。

参考

そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!

ふたご


でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!

ふたご

完全無料で一人前のエンジニアになれるプログラミングスクールあります
  1. プログラミング学習&サポートが無料!
  2. 誰もが知っている超優良企業への就職サポート付き!
  3. 学習言語:Java、PHP、HTML、CSSなど

 

   話だけ聞いてみる