この記事では主に js のスライドアニメーション効果の例を紹介します。皆さんが js を使用して簡単なスライドアニメーション効果を作成できるようになることを願っています。

<!DOCTYPE html><html><head>
  <meta charset="utf-8">
  <title>JS animation</title>
  <style>
    *{ margin: 0; padding: 0; }
    p{ background-color: green; width: 100px; height: 100px; }
  </style></head><body><p id="p1"></p><script>
  p1.style.position = 'absolute'
  p1.style.left = 0
  var n = 0
  var id = setInterval(  ()=>  {
    n = n + 5
    p1.style.left = n + 'px'
    if(n>100){
      window.clearInterval(id)
    }
  },1000/24)</script></body></html>

ログイン後にコピー

視覚的な一時停止により、これらの静止画像の組み合わせがアニメーションのような錯覚を与えることはわかっています。ここでは、この小さな正方形を 1 秒あたり 24 回、毎回 5 ピクセルずつ動かし、この錯覚を利用してゆっくりと動いているように見せます。
まず、左からオフセットを制御できるように p1 のスタイルを設定します。オフセットは n によって制御され、n は常に増加します。
アニメーションを停止する必要があるため、if を使用して n>100 になった時点を判断し、id という名前の間隔をクリアして機能しなくなるようにします。