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

    JavaScript

    円形に広がるメニュー実装「expanding action button」

    expanding action buttonは円形に広がるメニューを…

  2. ad-datepicker

    JavaScript

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

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

  3. xGallerify

    JavaScript

    サイズが異なる画像でもキレイに表示できるギャラリー実装「xGallerify」

    xGallerifyはギャラリーを作成するのに最適なjQueryプラグ…

  4. no-image
  5. jQuery UI Month Picker Plugin
  6. no-image

    JavaScript

    円形に飛び出すメニューを実装できる「ggExpandableOptions」

    ggExpandableOptionsは円形に飛び出すメニューを実装で…

最近の記事

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

Facebookページ

PAGE TOP