• ベストアンサー

アニメGIFをスライドで表示される度に１コマ目から

jQueryを使ったスライダーで、アコーディオン状に画面が水平スライドするのですが、 コメント枠にアニメGIFも表示しています。 スライダーが動いて最初にアニメGIFが表示された時だけ1コマ目から表示されますが、スライダーが折り返して次の表示の時にはGIFのループが途中から表示されてしまいます。 これをGIF画像が画面に映る度に1コマ目から表示させるにはどうしたら良いでしょうか？ 下記サイトがjQueryプラグインのソースサイトです。 http://www.armagost.com/zaccordion/

  • CSS
  • 回答数1
  • ありがとう数13

質問者が選んだベストアンサー

  • ベストアンサー
  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

http://rubentd.com/gifplayer/ この辺を使ってみてはどう？

mocmoc
質問者

お礼

ありがとうございます。 こちらは見かけた事があったのですが、オートで頭出しの繰り返しが出来るのか説明も良く解らず、注釈無しでどういじって良いか読み解けず諦めたコードでした。 一度じっくり解読してみます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • GIFアニメの透過色について

    GIFアニメで1MB以下でも綺麗なものが凄く多いです。 作り方の参考がてらにDLしてGiamに入れて一コマ一コマを見ていると、そういうものはどれも 透過色というのを使用しているようで、GIFで見ると普通に綺麗ですが、一コマ一コマ汚いものが あったりします。それが透過しているようなのですが、GIFアニメにおいて、透過する事で容量が軽く なるのは分かるのですが、透過するコマやタイミング、どの部分を、など、綺麗に軽く作るためには どうやればいいですか？ 大きさが例えば■■■■で同じ色部分があると 一コマ目は■■■■でも2コマ目は■という風にバッサリと黒い部分がなかったりするのですが、 GIFアニメにおいての透過の使い方がいまいち良くわかりません。 やり方もしくは、詳しく説明されているサイトなどがあれば教えてください。 また、GIFアニメで良く見ると画面全体ドットになっていたりするのですが、そういうのでも容量が 落とせるのでしょうか？こういうやり方も教えて下さい。ノイズを入れるというやり方もあるみたいなの ですがドットとノイズは違いますよね?

  • JQueryを使ったオートスライドショーについて

    Webサイトを作っているのですが、トップページにフェード効果のあるスライドショーを自動切り替えしたいと思っております。 とりあえず今日JQueryをダウンロードしたのですが、JQueryだけではスライドショーの機能を付けるのは難しいのでしょうか？ それともスライダー用のJQueryプラグインを使う必要があるのでしょうか？ JQueryだけでスライドショーを実現したほうが良いのか、プラグインを使ってスライドショーを実現した方が良いのか、どちらが良いのでしょうか？ 双方のメリットやデメリットがあれば教えて下さい。

  • GIFアニメにドットが現れる現象

    GIFアニメにドットが現れる現象について質問致します。 adobeFlashCS5を使用して作成したGIFアニメを、jQueryの「Fotorama」の中のスライドショーに組み込みました。 サムネイルを使ったバージョン（http://fotorama.io/customize/thumbnails/） で作成し、挿入してみましたところ、再生中になぜか網掛けのようなドットがアニメ上に現れます（画質が悪くなったような感じです） Flashでの作成時（背景は白で作成しました）、もしくは出力時におかしくなったのか（GIFアニメのみ、他の拡張子では動きませんでした）、それともjQuery挿入時にしなければならないことがあったのかわからず… スペックソース等必要でしたら仰ってください。 また、動きのあるものを乗せるならこのスライドショーがいいよ、等ありましたら教えて頂けると嬉しいです。 どうぞ宜しくお願い致します。

  • GIFアニメをループさせたくない

    サイトを回っているとき、ループしないGIFアニメがありました。 たしかに、拡張子はGIFになっていました こういうGIFアニメを作るにはどうすればいいんでしょうか？

  • ＧＩＦアニメが表示できません。

    普通のＧＩＦアニメは表示できるのですが、 下記のサイトのようなＧＩＦアニメが表示できません。 http://www.yyzo.com/read.php?tid=5184&fpage=11 （中国のサイトですが、詐欺ではありません。） （恥ずかしいサイトで申し訳あろません。） どうすればよいのでしょうか？

  • GIFアニメ　アップロードしたら表示されない

    下記の条件でGIFアニメを作成しましましたがWEB上では真っ白で表示されませんでした。解決方法をお知りの方お答え宜しくお願いします。 ホームページ作成ソフト　golive　cs GIFアニメ作成ソフト　　　Giam ホームページ開設先　　　plala gifアニメ　幅６０９ピクセル　高さ６０ピクセル コマ数　７コマ　色数　表示色数８色までに制限 コマ間隔　約３秒 ファイル名はad－anime.gif FFFTPで転送しております。 ホームページ作成ソフトのプレビューでは再生されます。HTMLファイルで開いたときも再生されます。またgifファイルをIEで開いた場合も再生されます。 いろいろ試みていますが何が悪いのかさっぱり分かりません。 宜しくお願いします。　

  • C# GIFファイルから1コマずつ画像を取得したい

    いつもお世話になっております。 最近、GIFアニメを表示するプログラムを作ろうと思い 色々調べているのですが、うまく行きません やりたいことは 　・複数フレームから構成されるGIFファイルを取り込む 　・ボタン押下など、好きなタイミングでコマを1つずつ表示 　・もしくは、コマの最後まで再生されたら違う絵を表示したい 　　（複数のGIFファイルをつなげて再生したい） 　・できれば、条件によって再生するアニメーションを分岐させたい 　・1コマずつ表示する時間を設定したい 質問内容は 　・GIFファイルから1コマずつ画像を取得する方法 　・1コマずつに設定されたウェイトを取得する方法 です。 私はよく、GiamというフリーソフトでGifアニメを作ります。 あれは、ウェイトの設定をすることで1コマずつ表示する時間を設定できますが それを取得したり設定したりすることもできるのでしょうか？ 参考サイトで、GIFファイルを取り込む方法として試しに 以下のコードを参考にしてみましたが、1コマずつ表示されません・・・ Image image = Image.FromFile(filePath); FrameDimension fd = new FrameDimension(image.FrameDimensionsList[0]); image.SelectActiveFrame(fd, 0); //ここで1コマ目を取得したつもり pictureBox1.Image = image; このようにすると、何故か表示した際に全部再生されてしまいます。。。 それに、プロパティやらを見ても、ウェイトや1コマずつ取得できそうなものが見当たりません・・ 調べ方が悪いのでしょうか； 分かる方がいましたら、よろしくお願いします。 ＜補足＞ 言語：C# .Net Framework 3.5

  • ブログ記事上でGIFアニメが動かない

    知人が最近ブログでGIFアニメを載せる（スマホのアプリで動画を撮影して自動でGIFアニメにしてくれるようなものです）ようになり自分も載せてようと試していますが上手く動きません。 使用しているブログサイトはlivedoor blog（因みに知人はameba）、livedoor blogは2MB以上のGIFアニメは動かないと聞きましたのでサイズを調整して２MB以下に抑えましたが動きません。（当初6MB程度のアニメを載せようとしたところアップロードの際に、5MB以上のGIFは投稿出来ませんと表示されました） 投稿した記事のGIFアニメの保存先URLを直接見ると１度だけ再生されます。このように画像を直接開かなくても記事上で動いて欲しいのですが記事上だと動きません。（ループされないのはキャッシュがどうのと聞きましたが、これもループ出来るようにしたいです。） 画像投稿の際にサムネイルを作らないようにする、というように解説されているページもありましたが、livedoorの場合アップロード時には特に設定する項目が見当たらず、アップロードした後の設定画面でもサムネイルサイズ程度しか項目が見当たりません。 記事上に貼り付けたgifアニメのhtml等に何か追記して動くようにすることは出来ないのでしょうか？ CSSで動かす方法も１度は考えましたが、livedoorブログのCSSはPCのみでスマホバージョンの表示に対しては反映されないのでこの方法も難しいと思います。

    • ベストアンサー
    • Flash
  • 重い処理を行っているとGIFアニメが止まってしまう

    お世話になります。 ローディング画面を作成しようと思いスピナーのGIFを用意しました。 <div id="main"> <div id="loading"><img src="spinner.gif" /></div> </div> 上記のような感じで画面遷移した際にはスピナーが表示されるようにして、 ページの読み込みが終わった際に $(window).load(function() { $("#main").load('htmlのURL'); }); のように、htmlを読み込んで表示しようとしています。 実際にはjqueryのajax通信を使って非同期にサーバー側でHTMLを生成してそれを読み込むようにしているのですが、読み込む際にスピナーのGIFアニメが止まってしまいます。 重い処理(サーバー側の処理)を行っているからだと思うのですがGIFアニメをとめずにhtmlを更新することはできないのでしょうか。 よろしくお願いします。

  • GIFアニメの動作の件で教えてください。

    フェイスブックやツィッター、アンドロイドスマホなどにGIFアニメをアップロードしたいのですが、他のサイトからGIFアニメが載っているサイトに切り替えただけで、GIFの静止画像ではなくGIFアニメを動作させるにはどうすればよいのでしょうか。 パソコンの場合、画面に表示されているGIFアニメの静止画像をクリックすれば動き出すのですが、クリックしなくとも初めから動くようにしたいので、どなたか教えてください。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する