EasyFader Plugin Demo

JavaScript

レスポンシブ対応で軽量なフェードスライドショーを実装する「EasyFader Plugin Demo」

シンプルなフェードアニメーションによるスライドショーを実装することができる「EasyFader Plugin Demo」をご紹介します。レスポンシブにも対応しているので、パソコンやスマホなどさまざまなデバイスで見やすいレイアウトを維持してくれます。

EasyFader Plugin Demo

EasyFader Plugin Demo

デモでは画面いっぱいに表示された画像がシンプルで美しいフェードアニメーションとともに自動で切り替わっていきます。左右の端には矢印アイコンも設置されていて、ここから任意でスライドさせることも可能です。

また、下部には画像の現在位置を知ることができるドットタイプのナビゲーションも用意されていて、ここから目的の画像に切り替えることもできます。

また、JSコードの下の方にあるslideDurとfadeDurの値を変更すれば、スライド間隔やアニメーションスピードを調整することが可能です。slideDurはスライドが切り替わるまでの間隔、fadeDurはフェードアニメーションのスピードになります。

数値を調節しながら自分好みのスライド間隔やアニメーションスピードを探してみてください。

画面いっぱいに広がった画像のフェードアニメーションによるスライドショーは、ダイナミックでありながらも優雅でどこか繊細さを感じさせますね。

というわけで、レスポンシブWebデザインにも対応した軽量で美しいフェードアニメーションのスライドショーを実装できる「EasyFader Plugin Demo」のご紹介でした。

Animated Intro With jQueryプログレスバーつきのカッコいいイントロページを実装する「Animated Intro With jQuery」前のページ

シンプルな機能で使いやすいjQueryによる水平スライダー「Linear Slider」次のページLinear Slider

関連記事

  1. jQuery Quick Modal
  2. PleaseWait

    JavaScript

    ローディングアイコンをオシャレに実装することができる「PleaseWait」

    PleaseWaitはローディングアイコンをオシャレに見せることができ…

  3. JavaScript

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイン「jQuery Zoom」

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイ…

  4. no-image

    JavaScript

    超シンプルでオプションもわかりやすいjQueryスライダー「Free Simple Slider」

    Free Simple Sliderは、超シンプルで使い方も簡単なスラ…

  5. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

  6. JavaScript

    色んなメニューやコンテンツをモーダルウィンドウで実装できるjQueryプラグイン「Pop Easy」…

    お洒落で可愛らしいjQueryプラグインを見つけたのでご紹介します。ロ…

最近の記事

  1. チキンバターマサラとシュリンプバターマサラ
  2. 恵比寿のダ・ミケーレのピザ
  3. ハムエッグホットサンドとドリップコーヒー
  4. 高輪ゲートウェイ駅のスタバ
  5. 新幹線

アーカイブ

PAGE TOP