JavaScript

複数の画像を用いて動画プレイヤー風に仕上げることができる「Jquery Image Player」

Jquery Image Playerは複数の画像を用いて動画プレイヤー風に仕上げることができるjQueryプラグインです。動画だと容量も多くなってしまいがちですが、画像を使うことで軽量化させることができますね。

Jquery Image Player

以下はJquery Image Playerのベーシックなタイプのデモになります。

Jquery Image Player

デモ

上記は単純に表示・非表示が切り替わるタイプですが、この他にもフェードイン、フェードアウト、スライドなどといったエフェクトで実装することも可能になっています。

その場合、例えばフェードインで表示させたい場合には画像タグにこんな感じでdata属性を与えてあげればOKです。

data-effect="fadeIn"

また、オプションでプレーヤーの幅や高さのサイズを設定することもできます。

使い方もシンプルですし、何より手軽に動画チックな雰囲気を楽しめるのがいいですね。ちょっとした説明や何かの手順を伝えたい時に活用してみてはいかがでしょうか?

Jquery Image Player

関連記事

  1. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン12選のまとめ 2012/08 – 2012/0…

    2012年8月〜2012月9月までの当ブログで紹介したjQueryプラ…

  2. Vertical Fixed Navigation #2
  3. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量ライブラリ「Lazyestload.js」

    Lazyestload.jsは画像の遅延読み込み機能を実装できる軽量の…

  4. JavaScript

    いろんなデザインのツールチップを実装できる「Opentip」

    Opentipはいろんなデザインのツールチップを実装することができるJ…

  5. jquery-steps

    JavaScript

    ステップ式のウィザードを実装できるjQueryプラグイン「jquery-steps」

    jquery-stepsは、ステップ式のウィザードを実装することができ…

  6. Fixit

    JavaScript

    要素を特定の位置に固定できるjQueryプラグイン「Fixit」

    Fixitは要素を特定の位置に固定することができるjQueryプラグイ…

最近の記事

  1. OWL-WDDESK01
  2. ワンタッチ着脱フィルターキット
  3. Soundcore Ace A1
  4. cheero USB-C PD Charger 60W

アーカイブ

PAGE TOP