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. jquery.confirmDialog
  2. basicContext

    JavaScript

    使いやすいコンテキストメニューを実装できる「basicContext」

    basicContextはシンプルで使いやすいコンテキストメニューを実…

  3. Multi-device scrolling menu
  4. Points Of Interest

    JavaScript

    各ポイントごとにクリックで詳細文を表示させるjQuery「Points Of Interest」

    Points Of Interestはサイト内に設置した各ポイントを…

  5. Inspiration for Letter Effects

    JavaScript

    印象的なテキストエフェクトを実装する「Inspiration for Letter Effects」…

    anime.jsを活用した、印象的でとってもかっこいいテキストエフェク…

  6. ad-datepicker

    JavaScript

    アクセシブルなデートピッカーを実装できる「ad-datepicker」

    ad-datepickerはアクセシブルなデートピッカーを実装できるj…

最近の記事

  1. NIB2600
  2. Anker PowerPort Atom PD 4
  3. USB-2H401BKN
  4. Dyson Pure Cool Me

アーカイブ

PAGE TOP