CSS Scroll Driven Animaion でスクロールに応じて右からスライドインするアニメーションを作成する - CSS

CSS Scroll Driven Animaion でスクロールに応じて右からスライドインするアニメーションを作成するコードを紹介します。

概要

Webページで縦にスクロールをすると、スクロール量に応じて画像がスライドインするページがあります。
この記事ではCSSの Scroll Driven Animaion機能を利用して、スクロールに応じて要素が右からスライドインする HTML,CSSのコードを紹介します。

実装例1:右からスライドインする

コード

以下のHTML,CSSファイルを作成します。

SlideInRight.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SlideInRight.css" />
</head>
<body>

  <div class="ContentsFrame">1</div>
  <div class="ContentsFrame">2</div>
  <div class="ContentsFrame">3</div>
  <div class="ContentsFrame">4</div>
  <div class="ContentsFrame">5</div>
  <div class="ContentsFrameC">
    6<br />
    <img class="ImageAnimation" src="img01.png">
  </div>
  <div class="ContentsFrame">7</div>
  <div class="ContentsFrame">8</div>
  <div class="ContentsFrame">9</div>
  <div class="ContentsFrame">10</div>
</body>
</html>

SlideInRight.css

body {
  overflow-x: hidden;
}

.ContentsFrame {
  border: 2px solid #44a9ff;
  height: 120px;
}

.ContentsFrameC {
  border: 2px solid #004e98;
}

@keyframes my-animation-progress {
  0% {
    transform: translateX(120%);
  }

  50% {
    transform: translateX(0);
  }
}

.ImageAnimation {
  width: 100%;
  transform-origin: left;
  animation: my-animation-progress linear;
  animation-timeline: scroll();
}

画像 "img01.png" は下図の画像を用意しました。

解説

ページのHTMLには、枠を10個配置します。6番目の枠以外は、高さが120ピクセルとします。
6番目の枠には画像を表示します。この画像はページ表示時には画面の外側に表示されており、スクロールすると、画面の右側からスライドインする動作にします。

  <div class="ContentsFrame">1</div>
  <div class="ContentsFrame">2</div>
  <div class="ContentsFrame">3</div>
  <div class="ContentsFrame">4</div>
  <div class="ContentsFrame">5</div>
  <div class="ContentsFrameC">
    6<br />
    <img class="ImageAnimation" src="img01.png">
  </div>
  <div class="ContentsFrame">7</div>
  <div class="ContentsFrame">8</div>
  <div class="ContentsFrame">9</div>
  <div class="ContentsFrame">10</div>

横スクロールバーを非表示にする設定です。

body {
  overflow-x: hidden;
}

CSSファイルのdiv枠のスタイルです。画像を表示する枠以外は高さを120ピクセルに設定しています。

.ContentsFrame {
  border: 2px solid #44a9ff;
  height: 120px;
}
.ContentsFrameC {
  border: 2px solid #004e98;
}

キーフレームの設定が以下です。今回は0%と50%を設定しています。
0%は、画像のx位置を画面幅の120%の位置に設定し、ページの外側の右側に配置しています。 50%でxの位置を0に設定し、元の画像の位置であるdiv枠の位置に設定しています。

@keyframes my-animation-progress {
  0% {
    transform: translateX(120%);
  }

  50% {
    transform: translateX(0);
  }
}

画像のimgタグのスタイルです。widthを100%に設定し、画像をdiv枠の横幅の大きさに合わせます。画像の基準位置の設定であるtransform-originはleftに設定し、左側を基準とします。
animation プロパティにキーフレームと、イージングの設定を記述します。今回は線形のイージングとします。
animation-timeline:scroll();の記述により、スクロールでキーフレームのアニメーションが動作する設定となります。ページの半分までスクロールすると、キーフレームの50%の設定となり、画像が元の位置に表示されます。

.ImageAnimation {
  width: 100%;
  transform-origin: left;
  animation: my-animation-progress linear;
  animation-timeline: scroll();
}

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

ページを下にスクロールします。[6]の枠から右ぎ側から画像がスライドインしてきます。

スクロールするごとに画像がアニメーションでスライドインします。

半分の位置までスクロールするとスライドインした画像が止まり、画像がすべて表示されます。

さらにページをスクロールしても画像は停止したままとなります。

実装例2:スライドイン後にスライドアウトする

コード

以下のHTML,CSSファイルを作成します。

SlideInRight.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SlideInRightAndOut.css" />
</head>
<body>

  <div class="ContentsFrame">1</div>
  <div class="ContentsFrame">2</div>
  <div class="ContentsFrameC">
    3<br />
    <img class="ImageAnimation" src="img01.png">

  </div>
  <div class="ContentsFrame">4</div>
  <div class="ContentsFrame">5</div>
  <div class="ContentsFrame">6</div>
  <div class="ContentsFrame">7</div>
  <div class="ContentsFrame">8</div>
  <div class="ContentsFrame">9</div>
  <div class="ContentsFrame">10</div>
</body>
</html>

SlideInRight.css

body {
  overflow-x: hidden;
}

.ContentsFrame {
  border: 2px solid #44a9ff;
  height: 120px;
}
.ContentsFrameC {
  border: 2px solid #004e98;
}

@keyframes my-animation-progress {
  0% {
    transform: translateX(120%);
  }
  15% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(-120%);
  }
}

.ImageAnimation {
  position: relative;
  width: 100%;
  transform-origin: left;
  animation: my-animation-progress linear;
  animation-timeline: scroll();
}

解説

ページのHTMLは先の例と同様です。スライドアウトする動作のため、画像の位置を3番目の枠に変更しています。

  <div class="ContentsFrame">1</div>
  <div class="ContentsFrame">2</div>
  <div class="ContentsFrameC">
    3<br />
    <img class="ImageAnimation" src="img01.png">

  </div>
  <div class="ContentsFrame">4</div>
  <div class="ContentsFrame">5</div>
  <div class="ContentsFrame">6</div>
  <div class="ContentsFrame">7</div>
  <div class="ContentsFrame">8</div>
  <div class="ContentsFrame">9</div>
  <div class="ContentsFrame">10</div>

キーフレームの設定が以下です。今回は0%,15%,30%,45%,100%を設定しています。
0%は、画像のx位置を画面幅の120%の位置に設定し、ページの外側の右側に配置しています。 15%でxの位置を0に設定し、元の画像の位置であるdiv枠の位置に設定しています。そのまま、30%までは元の位置のままとします。30%以上スクロールすると、左側にスライドアウトし。45%で-120%スライドし画面外に移動します。 100%を設定し、ページを一番下にスクロールしても左側に画像がいる状態にします。

@keyframes my-animation-progress {
  0% {
    transform: translateX(120%);
  }
  15% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(-120%);
  }

}