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. Listt

    JavaScript

    リストをiOSのようにアニメーションできるjQueryプラグイン「Listt」

    ListtはリストをiOSのセレクトボックスのようにアニメーションさせ…

  2. Excolo Slider

    JavaScript

    タッチにも対応しているシンプルなjQueryスライダー「Excolo Slider」

    タッチやマウススライドにも対応しているシンプルなjQueryスライダー…

  3. JavaScript

    jQueryで空港や駅にある掲示板のように指定した文字が切り替わっていくAirportを使ってみた

    面白いプラグインがあったので使ってみました。空港や駅にある掲示板みたい…

  4. Cavendish.js

    JavaScript

    CSS transitionsを活用したシンプルなスライドショーを実装できるjQueryプラグイン「…

    CSS transitionsを活用したシンプルなスライドショーを実装…

  5. Captall

    JavaScript

    画像やDOM要素の上にキャプションを表示することができるjQueryプラグイン「Captall」

    CaptallというjQueryプラグインを使えば、画像や設定したDO…

  6. Sticky Sidebar

    JavaScript

    スマートでハイパフォーマンスな追尾型サイドバー実装「Sticky Sidebar」

    Sticky Sidebarは、スマートでハイパフォーマンスな追尾型サ…

最近の記事

  1. Waterlogue
  2. macOS Mojaveのダークモード
  3. Olli
  4. 単語帳メーカー(Flashcard Maker App)

Facebookページ

PAGE TOP