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. simple-calendar

    JavaScript

    イベント設定もできるシンプルなカレンダー実装「simple-calendar」

    simple-calendarは、イベント設定も可能なシンプルなカレン…

  2. flexible-bootstrap-carousel
  3. jCorner

    JavaScript

    フラットデザインに合う紙をめくったエフェクトを実装できるjQueryプラグイン「jCorner」

    jCornerというjQueryプラグインを使ってみました。フラットデ…

  4. JavaScript

    画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

  5. JavaScript

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

  6. no-image

    JavaScript

    多彩なコンテンツ表示やカスタマイズ性を有する「LC Lightbox」

    LC Lightboxは画像や動画など多彩なコンテンツ表示ができたり高…

最近の記事

  1. 長十郎
  2. COMOLI シルクネルシャツ
  3. WiMAX
  4. 甘柿
PAGE TOP