HTML と CSS だけで立体的な要素をスクロールに合わせてアニメーションさせる

Posted at 2024-06-30

この記事の概要

最近の CSS は進化しているから、色々な要素を組み合わせれば JavaScript なしに 3D っぽい要素をアニメーションさせられるのでは？と思って、試してみた記事です。

なお、記事内に出てくる正四面体の作り方は以下の記事をご覧ください。

この記事を書いている 2024 年 6 月 30 日時点では Chrome と Edge でのみ動くコードです。Safari と Firefox では動きません。

完成形

スクロールにあわせて正四面体が回転しています。¹

HTML

HTML は非常にシンプルです

<body>
  <div class="dummy-content">Dummy content for scrolling</div>
  <div class="scene">
    <div class="regular-tetrahedron">
      <div class="face face-1">1</div>
      <div class="face face-2">2</div>
      <div class="face face-3">3</div>
      <div class="face face-4">4</div>
    </div>
    <p>
      <!-- ダミーのテキスト -->
    </p>
  </div>
  <div class="dummy-content">Dummy content for scrolling</div>
</body>

regular-tetrahedronの中の要素が正四面体を形作っています。

CSS

要素を 3D にするためにはtransform-style: preserve-3d;を指定します。

この記事では正四面体のそれぞれの面の角度や位置などの指定方法は省略しています。
気になる方は記事冒頭で紹介したこちらの記事をご覧ください。

  .regular-tetrahedron {
    /* 見た目を再現するためのコード */
+   transform-style: preserve-3d;
  }

次にアニメーションを定義します。

+ @keyframes rotate {
+   from {
+     transform: rotateX(0deg) rotateY(0deg);
+   }
+   to {
+     transform: rotateX(360deg) rotateY(360deg);
+   }
+ }

  .regular-tetrahedron {
    /* 見た目を再現するためのコード */
    transform-style: preserve-3d;
  }

そしてアニメーションを実現するためのコードを書きます。

よくある CSS アニメーションだと何秒間でアニメーションするかや何回アニメーションするかなどを指定しますが、スクロールにあわせてアニメーションする場合は少し書き方が違います。

animation-timelineを使い、scroll()やview()で細かな指定をします。²

  @keyframes rotate {
    from {
      transform: rotateX(0deg) rotateY(0deg);
    }
    to {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }

  .regular-tetrahedron {
    /* 見た目を再現するためのコード */
    transform-style: preserve-3d;
+   animation: rotate;
+   animation-timeline: view();
  }

あとはちょっとした調整で、正四面体の位置を調整します。

  @keyframes rotate {
    from {
      transform: rotateX(0deg) rotateY(0deg);
    }
    to {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }

  .regular-tetrahedron {
    /* 見た目を再現するためのコード */
    transform-style: preserve-3d;
    animation: rotate;
    animation-timeline: view();
+   position: sticky;
+   top: 25dvh;
  }

たったこれだけの指定で、HTML と CSS のみでアニメーションする 3D 要素を実現できました。

スクロールしているのが分かりやすいように背景に文字を配置していますが、実際にこのとおりに実装したら読みづらくて仕方ないので、良い具合にアレンジしてください。 ↩
今回は簡単なアニメーションを例示するだけなのでこの指定だけで終わらせています。更に知りたい方はこちらの記事に詳しくまとまっているので、よろしければどうぞ。 https://qiita.com/degudegu2510/items/9fa70a8b5284e37f2fe3 ↩

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up