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. Water Wave Effect jQuery
  2. Shine

    JavaScript

    ダイナミック(動的)で美しいシャドウを実装できるJSライブラリ「Shine」

    ShineというJavaScriptライブラリが素敵だったのでメモがて…

  3. JK Responsive Youtube Video and Image Gallery
  4. no-image

    JavaScript

    テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」

    jTyperはテキストリンクをタイピングアニメーションで表示できるjQ…

  5. JavaScript

    jQueryで好きな要素を浮遊させることができるプラグイン「jqFloat」を使ってみた

    指定した要素をフワフワと浮遊させることができる面白いプラグインを使って…

最近の記事

  1. cheero Smart USB Charger 48W CHE-320
  2. ブエノカフェ CM-200

アーカイブ

PAGE TOP