Skrollr.js を使用して画像シーケンスをアニメーション化しています。http://moto.oakley.comサイトが画像シーケンスを処理する方法から着想を得て、DOM への一連の画像の書き込みを自動化するためのスクリプトを作成しました。次に、Skrollr を使用して、主要なスクロール位置でdisplay:none;toを変更します。display:block私のスクリプトは、完全なイベントをディスパッチする前にすべての画像をプリロードしてから、Skrollr を初期化して対話を許可します。
だから、基本的に私は<div>これらの束を持つ包含を持っています:
<img src="seq-000.png" data-0-top="display:block;" data-50-top="display:none;">
<img src="seq-001.png" data-0-top="display:none;" data-50-top="display:block;" data-100-top="display:none;">
<img src="seq-002.png" data-50-top="display:none;" data-100-top="display:block;" data-150-top="display:none;">
...
現在、これは Chrome と FireFox では (当然のことながら) 正常に機能していますが、Internet Explorer 11 では、ページを最初にスクロールするときに画像のレンダリングに問題があるようです。つまり、最初にページを読み込んでスクロールすると、プリロードされていないように画像が点滅しますが、その後のスクロールではアニメーションはまったく問題ありません。IE11 が画像をメモリにレンダリングしていないようなので、最初に画像が表示されるときに画面への描画速度に遅延が生じます。
Skrollr が問題だとは思いません。おそらく、私が使用すべき魔法の CSS 設定がいくつかあります。
Internet Explorer でも常に非常に滑らかに見えるように、画像シーケンスを作成するためのヒントはありますか?!?
ありがとう！