【CSS】animation-timelineでスクロール連動アニメーション その2

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

CSSだけでスクロールに連動したアニメーションの実装パターン2。

GSAPでいうスクラブアニメーションみたいな動きができます。

パターン1はこちら。

【CSS】animation-timelineでスクロール連動アニメーション
どうも、くまだです。 CSSだけでスクロールに連動したアニメーションの実装メモ。 GSAPでいうスクラブアニメ…
weblife.ppmp556.com

animation-timelineでアニメーション設定

コードは以下のとおりです。

  <section>
    <div class="contents">
      <div class="barWrap">
        <div class="bar"></div>
      </div>
      <p>↓</p>
      <p>↓</p>
      <p>↓</p>
      <p>↓</p>
      <p>↓にスクロール</p>
    </div>
  </section>
.contents {
  width: 100%;
  height: 300vh;
  display: flex;
  justify-content: center;
  position: relative;
  background-color: skyblue;
}

p {
  color: white;
  font-size: 30px;
}

.barWrap {
  position: fixed;
  top: 20px;
  left: 0;
  width: 100%;
  z-index: 1;

}

.bar {
  width: 0%;
  background-color: orange;
  animation: linear progress;
  animation-duration: auto;
  animation-timeline: scroll();

  height: 10px;

}

@keyframes progress {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

See the Pen animation-timeline by kuma0605 (@kuma0605) on CodePen.

スクロールに応じて、オレンジのバーが伸び縮みします。

以下の部分でアニメーションを設定。

@keyframes progress {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

設定したアニメーションは、以下の部分で使用します。

.bar {
  width: 0%;

  /* 設定したアニメーション */
  animation: linear progress;
  animation-duration: auto;

  /* アニメーションタイムライン */
  animation-timeline: scroll();
}

ここまで読んでくださりありがとうございました。

CSS

この記事を書いた人

くまだ

記事一覧