SHIDEN DESIGN BLOG

thumnail_20170511

スクロールで特定の領域に達したらGIFアニメーションを再生させる方法

SponsorLink

スクロールしてきて特定の領域に達したらGIFアニメーションを再生させる方法です。
 
考え方は凄くシンプルで、jQueryでスクロール位置を取得し、要素のbackgroundにGIFを指定するだけです。

 
 

空の要素

 
 
今回のデモではh1タグを使用していますので、サンプルコードでもh1タグで記述させていただきます。使用するGIFのサイズに合わせてwidthとheightを設定してください。

 
 

再生のタイミングを制御

 
 
GIFアニメーションは、再生したコマ数をブラウザにキャッシュされてしまいますので、そのままbackgroundに指定しても、途中から再生されてしまったり、ループ再生でない場合は最後のコマで止まったまま表示されてしまったりします。
ですので、よくある対策として日時データをタイムスタンプとして使用する方法があります。
 
複数の要素を使用することも考えて、日時データを変数化しておきます。

 
 

スクロール位置の取得とbackgroundの指定

 
 
スクロールされた際に、要素の位置とスクロール量とウィンドウの高さを取得します。

 
 
 
if文は、大雑把な言い方をすると、要素がウインドウの下から300pxの位置にきたらという条件式になっています。

 
 
 
最後、GIFのパスを指定する際、パスの末尾に’+’?’+”+now+’とし、日時データを与えてあげることを忘れないようにしてください。

 
 

SponsorLink

Related Articles