jquery - jqueryスプライトアニメーションレスポンシブ

Question

2つの画像のgifアニメーションをスプライトに置き換えたいです。問題は、レスポンシブデザインを使用していることです。したがって、ウィンドウサイズが変更されると、「システム」全体が機能しなくなります。gifは悪く、CPUは食べていますが、正しくスケーリングされます。

だから私の質問-私は解決策を見つけられなかったので-実際のウィンドウからウィンドウサイズを取得し、画像を正しい高さ、幅にスケーリングし、もちろん「ジャンプ」を1番目の画像から2番目の画像に変更することは可能ですか？

var scrollUp = (function () {

  var timerId;

  return function (height, times, element) {
    var i = 0;
    timerId = setInterval(function () {
      if (i > times)
        i = 0;
      element.style.backgroundPosition = "0px -" + i * height + 'px';
      i ++;
    }, 100  );
  };
})( );

scrollUp( 1200 ,   6, document.getElementById('anim'))

したがって、このコードでは、画像サイズは1200に設定されています-そうです、ディスプレイが1980x1200の場合、ディスプレイが変更されると、サイズ1200が間違っています-実際のディスプレイサイズである必要があります-同時に、画像はそのサイズにスケーリングされます。

このようなことは可能ですか？または、eaysレスポンシブスプライトアニメーションのより良いアイデアはありますか？

多分css3？

ありがとう！

広告