• RSS

[JS]背景画像にスライドやフェードの動きを付与できる「jQuery.BgSwitcher」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

複数の背景画像をスライドで横に動かしたり、フェードイン、フェードアウトで切り替えたりすることができるjQueryプラグイン「jQuery.BgSwitcher」のご紹介です。

jQuery.BgSwitcher ファイルのダウンロード

以下のページより、jQuery.BgSwitcher のファイルを一式ダウンロードします。

jQuery.BgSwitcher の使い方

ダウンロードした jquery.bgswitcher.jsを、jquery ファイルと一緒に設置します。

images に背景画像を複数枚設定します。

あとはeffecteasingloop などの各エフェクトをサイトに合わせて設定していくのですが、以下のページで jQuery.BgSwitcher で使えるエフェクトを確認することができますので、
実際にスライドさせたりしながら、設定してみましょう。


背景画像にスライドやフェードの動きを付与できるjQuery「jQuery.BgSwitcher」


もし、上手く背景画像が表示されない場合は、背景画像を表示させる要素に以下のようなCSS を別途指定してみてください。

当方のデモページでもjQuery.BgSwitcher を動かしてみましたので、こちらも是非参考にしてみてください。
jQuery.BgSwitcher で背景画像をスライドさせるデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

  1. […] 使用例:目黒駅前アキクリニック 配布元:https://github.com/rewish/jquery-bgswitcher チュートリアル:[JS]背景画像にスライドやフェードの動きを付与できる「jQuery.BgSwitcher」 […]

  2. […] 使用例:目黒駅前アキクリニック 配布元:https://github.com/rewish/jquery-bgswitcher チュートリアル:[JS]背景画像にスライドやフェードの動きを付与できる「jQuery.BgSwitcher」 […]

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください