javascript - カーソルが上にあるときに gif をアクティブにする

Question

スターウォーズのファンサイトを作っています。

私のナビゲーション メニューは、スター ウォーズのライトセーバーになります。

実際の光の剣が出てくるように（カーソルがライトセーバーの上にあるとき）作成する予定です。カーソルがライトセーバーから離れると、ライトセーバーは元に戻ります。

私はそれを行うgifを持っていますが、カーソルが上に置かれたときにそれを非アクティブにしてからアクティブにする方法は??

上記のアイデアが正しくないように聞こえる場合は、どのようにすればよいでしょうか?

Answer 1

いいえ、画像のアニメーションを制御することはできません。

アニメーション化されたもの (.gif) とそうでないもの (.gif/.png/.jpg/etc) の 2 つのバージョンの各画像が必要になります。

ホバーすると、ある画像から別の画像に簡単に変更できます。

例：

$(function(){
  $('img').each(function(e){
    var src = $(e).attr('src');
    $(e).hover(function(){
      $(this).attr('src', src.replace('nonanimated.gif', 'animated.gif'));
    }, function(){
      $(this).attr('src', src);
    });
  });
});

参考リンク

Answer 2

Parag Meshram が言ったように、jQuery や JavaScript でそれを行う必要はありません:

.foo {
  background: url(still.png) no-repeat 0 0;
}
.foo:hover {
  background-image: url(animation.gif);
}

Answer 3

やり過ぎかもしれませんが、WebGLでGIFを制御できると思います。

ここにいくつかの GIF 操作があります。これはあなたが求めるものではありませんが、独自の何かを行うためのインスピレーションになるかもしれませんhttp://www.clicktorelease.com/code/gif/

Answer 4

あなたの最善の策は、実際にハンドルと剣を 2 つの異なるグラフィックに分割してから、Javascript を使用して (背景プロパティとして) 剣をアニメーション化することです。この方法では、GIF ファイル形式の制限はありませんが、ファイルはずっと小さくなります。剣と同じサイズの div を作成し、背景として設定する必要があります。次に、background-position-x を -100% に設定し、ホバー時にアニメーション化します。そのために jQuery を使用できます。

$('.sword').on('hover', function(event){
$(this).animate({
        'background-position-x': '0%',
    }, 100, 'linear');
});
$('.sword').off('hover', function(event){
$(this).animate({
        'background-position-x': '-100%',
    }, 100, 'linear');
});

(私はこれを頭の上から書きました。これが機能しない場合は、jQuery ドキュメントを確認してください)