みかづきブログ・カスタム

基本的にはちょちょいのほいです。

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

f:id:kimizuka:20210116000336p:plain

blog.kimizuka.org

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

kimizuka.github.io




ポイントは一つだけで、ページのスクロールの量(画面上部から何%スクロールしているか)は取得できているので、それに応じて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