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」のご紹介でした。

関連記事

  1. Unite Gallery

    JavaScript

    レスポンシブな画像・動画ギャラリーを実装できる「Unite Gallery」

    Unite Galleryは、レスポンシブに対応した画像・動画ギャラリ…

  2. JavaScript

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラグイン「mlens」

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラ…

  3. jquery.stepper.js

    JavaScript

    マウス操作で値の増減ができるjQueryプラグイン「jquery.stepper.js」

    jquery.stepper.jsは、マウス操作から手軽に値の増減を行…

  4. Touch-Tabs-jQuery

    JavaScript

    イベントやカスタマイズが可能な拡張性の高いタブシステム「Touch-Tabs-jQuery」

    Touch-Tabs-jQueryは、イベント設定やカスタマイズが可能…

  5. no-image

    JavaScript

    シンプルなモバイルメニューを実装できる「offcanvas-mobile-menu」

    offcanvas-mobile-menuは、シンプルでモバイルフレン…

  6. TV Credits

    JavaScript

    垂直・水平方向に滑らかに流れていくティッカーを実装できるjQueryプラグイン「TV Credits…

    TV Creditsは垂直方向や水平方向に流れていくティッカーを実装す…

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP