サイト制作でアニメーションを使用した感想

この記事は ウェブクルー Advent Calendar 2025 の12日目の記事です。
昨日は @wc-nakayama さんの「自分なりにカリー化についてまとめた」でした。

そういえば12日は今年の漢字を発表する日なのであらかじめ予想しておきます
「初」と予想　当たってたら喜びます。

---

今回私は自分の目標でサイトを作りサイトの構造やコードに慣れるということを下期の目標にしているため、その過程で現在制作中のアニメーションなどの機能の良かったところと、まだ学ぶべきとこを紹介していこうと思います

アニメーションを使用したサイトの作成

今回は映画のレビューサイトを作ろうと考えており、その中で映画を見せる部分をかなりアニメーションにこだわりたいと思い今回使っていきたいと思います。
サイトはまだ制作途中ですがアニメーションだけは機能実装を行いました。

1.使った内容

サイトのホームはこのような感じにしました
本当に人に見せるよう作っていないので自分の趣味を全開に出しています！

また全てを表示というボタンを押すと

このようにモーダル画面が開くようになっています。
このモーダル画面ではそれぞれのカテゴリーの映画をすべて表示できるようになっており。
ここの年代のタグやアクションなどカテゴリーのタグを押していただいても検索することが可能です。

表示方法自体は単純で
下記のようにlistを手動で使用しています

このようにカテゴリーを使って映画のタイトルや年代といった細かなものをうっていきそれを反映させているような形です。

年代などが必要なのは最初の画像でもあった検索機能の中で簡単に検索できるようにするためです。
まだ実装してはいませんが映画の内容を一つずつ概要などを含めて入れていければと考えています。

2.アニメーション

さてここでアニメーションを使った機能の内容なのですが

onMounted(() => {
  const scrollContainers = document.querySelectorAll('.scroll-container')
  
  scrollContainers.forEach(container => {
    let isDown = false
    let startX
    let scrollLeft
    let autoScrollInterval
    let isPaused = false
    
    const startAutoScroll = () => {
      autoScrollInterval = setInterval(() => {
        if (!isPaused && !isDown) {
          container.scrollLeft += 1
          
          if (container.scrollLeft >= container.scrollWidth - container.clientWidth) {
            container.scrollLeft = 0
          }
        }
      }, 30)
    }
    
    container.addEventListener('mouseenter', () => {
      isPaused = true
    })
    
    container.addEventListener('mouseleave', () => {
      isPaused = false
      if (isDown) {
        isDown = false
        container.classList.remove('active')
        container.style.cursor = 'grab'
      }
    })
    
    container.addEventListener('mousedown', (e) => {
      isDown = true
      isPaused = true
      container.classList.add('active')
      startX = e.pageX - container.offsetLeft
      scrollLeft = container.scrollLeft
      container.style.cursor = 'grabbing'
    })
    
    container.addEventListener('mouseup', () => {
      isDown = false
      container.classList.remove('active')
      container.style.cursor = 'grab'
      setTimeout(() => {
        if (!container.matches(':hover')) {
          isPaused = false
        }
      }, 1000)
    })
    
    container.addEventListener('mousemove', (e) => {
      if (!isDown) return
      e.preventDefault()
      const x = e.pageX - container.offsetLeft
      const walk = (x - startX) * 2
      container.scrollLeft = scrollLeft - walk
    })

    let touchStartX = 0
    let touchScrollLeft = 0

    container.addEventListener('touchstart', (e) => {
      isPaused = true
      touchStartX = e.touches[0].pageX - container.offsetLeft
      touchScrollLeft = container.scrollLeft
    })

    container.addEventListener('touchmove', (e) => {
      const x = e.touches[0].pageX - container.offsetLeft
      const walk = (x - touchStartX) * 2
      container.scrollLeft = touchScrollLeft - walk
    })
    
    container.addEventListener('touchend', () => {
      setTimeout(() => {
        isPaused = false
      }, 1000)
    })
    
    startAutoScroll()
  })
})

となりました

onMounted

を使用することで常時監視をしており
アニメーションとしては毎秒ごとに右から左へと流れていくだけの動きとなっており
速度の変更も可能です。

その他の関数部分はオートスクロールを止める条件やマウスカーソルを当てた時の動きなどについて書かれています。

3.頑張ったこと

ここで私が頑張ったのは自動スクロールとそれに伴う自分でスクロールもできるようにするという
二重で動かす機能を作るということでした。

初めは、動かしてみるとマウスカーソルを当てているのに動き続けたりと挙動としてはおかしなことになってしまっていたため発想を変えて
動かすということはマウスカーソルを当てているということなのでコンテナにマウスカーソルが当たっている時は動きを止めてそこから手動操作ができるようにするとすることで動きを最低限にすることができました。

そしてこのスタートオートスクロールという関数で名前の通りカーソルが外れた時に再びアニメーションが始まる関数になっています。

      autoScrollInterval = setInterval(() => {
        if (!isPaused && !isDown) {
          container.scrollLeft += 1

これにより無駄な動きがなく円滑に操作をできるようになりました

4.アニメーションを使用してみた感想

まず初めに私は今回の使用でアニメーションがかなり好きになりました。
感覚ですが現代のサイトには多くのアニメーションが使用されています。
今回参考にさせていただいたのはNetflixですが人は動きが多少あると静止しているホームページに比べて目を奪われるというのが自分で使用していて感じました。

やはり動きを与えることで退屈感が減るというのもあると考えます。

今後の利用に関してでいうとまだそこまで使用する機会は私にはないと思いますが、今後新規で何かサイトを立ち上げたりする際にはアニメーションを使用してユーザーが退屈しないような構造にしていくのも面白いのではと考えました。

5.コード全体の学び と まとめ

今回はHtml　CSS　JSを学び復習するために始めたものですが本当にこのプログラミングという学習において終わりがないなと思いました。
実際に昔少し使ったことがあるアニメーションとは今回使用したものは違いますし、JS本来の機能でアニメーションを入れられるものもあったのでどれを使うかも悩んでいました。
これから先の計画では今回使用したものだけではなくReactやNextなども仕事では使っていくのでそれらを学ぶ上でもこのように自分で楽しく学んでいくという姿勢はこれからも続けていければ嬉しいです！

明日は@youngjae_won さんの投稿になります。よろしくお願いします。