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. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

  2. Picker

    JavaScript

    iOSのようなピッカーを実装できるJSライブラリ「Picker」

    Pickerは、iOSのUIのようなピッカーを実装することができるJS…

  3. shCircleLoader
  4. Responsive jQuery Pop Up Gallery
  5. TwentyTwenty

    JavaScript

    2枚の画像を見比べれるjQueryプラグイン「TwentyTwenty」

    TwentyTwentyは2枚の画像を見比べれる便利なjQueryプラ…

  6. Sal.js

    JavaScript

    Vanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」

    Sal.jsは軽量のスクロールアニメーションを実装できるライブラリです…

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP