開始するgifのタイマーを設定する

Question

私は、画面の左から数百ピクセル右に始まるようにアニメーション化された.gifを持っています。アニメーションは5秒間続き、最初の位置に戻らないように設定しています。

私がしたいのは、CSSアニメーションが終了したら.gifを開始することです。アニメーションの.jpgソースから.gifに変更されるように、マウスオーバーエフェクトのコードを提供するフォーラムもあります。しかし、私はあなたにマウスオーバーの代わりにタイマーを与える何かを見つけることができません。

私はウェブサイトで作業して以来、ずっと忘れていたので、これは苦労しています。

何か助けていただければ幸いです。乾杯。

Answer 1

<img>ソースをjavascriptで変更する方法はかなり簡単ですが、構文はimg.src = "new/source.gif"のように見えます。

GIFの変更がアニメーションの終了と一致することはさまざまな方法で達成できますが、タイムアウトを設定すると同時にクラスとして要素にアニメーションを追加することでそれを行いますあなたのJavaScriptで。

HTML

<img id="image" src="path/to/static.jpg"> 

JAVASCRIPT

var img = document.getElementById("image"); 

function photoSwitch(){ 

    // begin your CSS animation by applying class 
    img.setAttribute("class", "some-animation"); 

    // have javascript wait 5s before switching the image source 
    setTimeout(function(){ 
     img.src = "path/to/moving.gif"; 
    },5000); 
} 

photoSwitch(); 

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.