PreViewTube.js

JavaScript

YouTubeのサムネイル画像をアニメーション表示してくれる「PreViewTube.js」

PreViewTube.jsはYouTubeにある動画のサムネイル画像をアニメーション付きで表示させることができるjQueryプラグインです。動画を見るか見ないかを決める際のちょっとした判断材料として活用できますね。

PreViewTube.js

デモ

デフォルトではサムネイル画像にマウスオーバーするとアニメーションが開始されます。連続した画像が一定の間隔で切り替わっていくので、ザックリとどういった内容なのかを確認するにはピッタリですね。

オプション項目のmodeをconstantに設定すると常時アニメーションが流れるようになります。スピード(間隔)を調節したい場合はintervalに任意の数値を指定すればOKです。

以下はmodeをconstant、intervalを500に設定した時の使い方です。

$('.someSelector').PreViewTube({
    'interval' : 500,
    'mode' : 'constant'
});

jQuery本体とPreViewTube.jsは予め読み込んでおく必要があります。あとはYouTubeのサムネイルを記述するだけで簡単に表示させることができます。

PreViewTube.js

jQuery.mousetipマウスの動きや位置に追従してくるツールチップを実装できる「jQuery.mousetip」前のページ

豊富なスライドアニメーションが揃っているjQueryプラグイン「Pogo Slider」次のページPogo Slider

関連記事

  1. Starfield

    JavaScript

    宇宙空間を移動するような背景アニメーションを実装できる「Starfield」

    Starfieldは宇宙空間を移動するような背景アニメーションを実装す…

  2. basicScroll

    JavaScript

    モバイル・デスクトップに対応したパララックススクロール実装「basicScroll」

    basicScrollはモバイル・デスクトップに対応したスタンドアロー…

  3. Timeline

    JavaScript

    水平・垂直に対応したVanilla JSによるタイムライン実装「Timeline」

    Timelineは水平・垂直に対応したVanilla JSを使ったタイ…

  4. socialShare.js
  5. jLetter

    JavaScript

    テキストを散らばせながら次々と表示させることができるjQueryプラグイン「jLetter」

    シンプルでちょっと目を引かせたいところなんかによさそうだったので使って…

  6. JavaScript

    指定した要素をパカパカと点滅させることができる「jquery.flicker」

    とてもシンプルなプラグインだったのでメモがてらご紹介します。指定した要…

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP