Next.jsでページのスクロールを管理してクロールする 🏊‍♂️

blog.kimizuka.org

以前つくったスクロール管理の仕組みをつかって、ページをスクロールするとクロールするサイトをつくりました。

kimizuka.github.io

Next.jsを使ってページスクロールに連動してクロールするサイトを作りました。https://t.co/Mdth7el9XS pic.twitter.com/LZwbleg1yv

— 君塚史高 (@ki_230) 2021年1月15日

ポイントは一つだけで、ページのスクロールの量（画面上部から何％スクロールしているか）は取得できているので、それに応じてdata属性を付けかえている点です。

<div
  data-index={ Math.round(animationLength * progress) }
  className="crawl"
/>

そして、data属性にCSSでスタイルをあてることで、アニメーションを進行させています。

.crawl {
  position: fixed;
  top: 50%; left: 50%;
  margin: auto;
  max-width: 600px; max-height: 300px;
  width: 100%;
  background: url(/crawl/img.png) center top no-repeat;
  background-size: cover;
  transform: translate(-50%, -50%);
  pointer-events: none;

  &:after {
    display: block;
    padding-top: 50%;
    content: '';
  }

  ${(() => {
    let styles = '';

    for (let i = 0; i < animationLength; ++i) {
      styles += `
        &[data-index='${ i }'] {
          background-position: center ${ 100 / (animationLength - 1) * i }%;
        }
      `;
    }

    return css`${ styles }`;
  })()}

  &[data-index='${ animationLength }'] {
    background-position: center top;
  }
}

非常に簡単に実装できました（クロールのイラストを描くところが一番苦労しました）。
そしてstyled-componentsを使うとJSとCSSで変数を使いまわせる（今回だとanimationLength）のが便利！というのが心で理解できました。
CSSを使うのではなく、Canvasをつかっても良かったかもしれません。

まだまだ改善の余地がありますが、ソースコードの全貌はリポジトリに公開してますので、興味のある方は是非ともご覧ください！

github.com