gifアニメーションを任意のスクロール位置で再生

Question

前提・実現したいこと

複数のgifアニメを任意のスクロール位置で再生スタート、
およびgifアニメの最初のフレームに戻るようにしたい。
再生ボタンではなく、自動かつループで実行したい。

発生している問題・エラーメッセージ

スクロールごとにjsが読み込まれるために、スクロールのたびにgifアニメが最初から再生されてしまう
放置で最後まで再生されるが、スクロールしても任意の位置までは最後まで再生したい。
切替り範囲(Pos01～Pos02）内で軽くスクロールしてもgifアニメ(全部で20秒ほどの)が0秒から再生されてしまいます。
10秒ほどgifが再生されている状態から、gifままの範囲内(Pos01～Pos02)でほんの少しスクロールしてしまうと続きが再生されず0秒位置から再生されてしまうのを解決したいのです。。
chromeの開発者コンソールで確認すると、jpg→gif→jpgという風にソース自体は質問したjsで切り替わります。

該当のソースコード

<div class="animearea">
<p id="animation01"><img src="animeA.jpg" /></p>
<p id="animation02"><img src="animeB.jpg" /></p>
<p id="animation03"><img src="animeC.jpg" /></p>

$(window).scroll(function (){
      var scroll = $(this).scrollTop();
      var Pos01 = 1000;
      var Pos02 = 2000;
      var Pos03 = 3000;
      var Pos04 = 4000;
      if (scroll > Pos01 && scroll < Pos02 ) {
        $("#animation01 img").attr("src","animeA.gif" );
      } else {
        $("#animation01 img").attr("src","animeA.jpg" );
      };
      if (scroll > Pos02 && scroll < Pos03 ) {
        $("#animation02 img").attr("src","animeB.gif" );
      } else {
        $("#animation02 img").attr("src","animeB.jpg" );
      };
      if (scroll > Pos03 && scroll < Pos04 ) {
        $("#animation03 img").attr("src","animeC.gif" );
      } else {
        $("#animation03 img").attr("src","animeC.jpg" );
      };
});

補足

animeA.jpg
animeB.jpg
animeC.jpg
がそれぞれのgifアニメ1フレーム目の静止画です。

Answer 1

gifアニメの1枚めだけ別途ファイルを用意しておいて
スクロールでファイルを入れ替えてやればよいのでは？

sample

アニメーションgifはとりあえず置いておいて
特定の範囲でimgのsrcを切り替えるならこんな感じ
キャッシュを明確化するためにimgsを設定してあります

ページのレンダリングが終わらないと位置が確定しないので一応pageshowを前提にしてあります

<style>
.dummy{background-Color:gray;height:999px}
</style>
<script>
$(window).on('pageshow',function (){
  var imgs=[];
  imgs[0]=new Image();imgs[0].src="1.jpg";
  imgs[1]=new Image();imgs[1].src="2.jpg";
  var Pos01 = 600;
  var Pos02 = 1000;
  $(window).on('scroll',function (){
    var scroll = $(this).scrollTop();
    $("#animation01 img").attr("src",(scroll > Pos01 && scroll < Pos02 )?imgs[1].src:imgs[0].src );
  });
});
</script>
<div class="dummy"></div>
<div id="animation01"><img src="1.jpg"></div>
<div class="dummy"></div>

調整

画像が置き換わったときだけ書き換えればよいかも

$(window).on('pageshow',function (){
  var imgs=[];
  imgs[0]=new Image();imgs[0].src="1.jpg";
  imgs[1]=new Image();imgs[1].src="1.gif";
  var Pos01 = 600;
  var Pos02 = 1000;
  var pre="";
  $(window).on('scroll',function (){
    var scroll = $(this).scrollTop();
    var src=(scroll > Pos01 && scroll < Pos02 )?imgs[1].src:imgs[0].src;
    if(pre!==src) $("#animation01 img").attr("src",src);
    pre=src;
  });
});

Comments

[k4016]

わかりづらくてすみません、1フレーム目の画像がanimeA.jpg(animeB,animeC)です。
animeA.gifが一連のアニメーションになっています。

[k4016]

サンプルソースありがとうございます。
切替り範囲(Pos01～Pos02）内で軽くスクロールしてもgifアニメ(20秒ほどの)が0秒から再生されてしまいます。
10秒ほどgifが再生されている状態につきまして、gifままの範囲内(Pos01～Pos02)でほんの少しスクロールしてしまうと0秒位置から再生されてしまうのを解決したいのです。。
chromeの開発者コンソールで確認すると、jpg→gif→jpgという風にソース自体は質問したjsで切り替わります。

[k4016]

ありがとうございます！
こちらで正常に動作しました。色々勉強させていただきありがとうございました。