背景画像をアニメーションで自動切換 フェード・スライド/bgswitcher

公開日:  最終更新日:2022/08/27

背景画像をスライドショーやフェードで切り替えjQueryプラグイン「BgSwitcher」
ページのメインコンテンツとして画像を切り替えことが出来るスライダーをこのブログでもいくつか紹介してきました。省スペースに複数の画像を配置できるネットショップ等でもよく使われている表示パーツではないでしょうか。

上記がその過去記事の一部です。メインコンテンツとして大きめのバナー等を動きを付けて複数のバナーを配置・見せることが出来るネットショップ等でもよく使われている見せ方だと思います。

本日も、画像を切り替えてくれるjQueryプラグインを紹介しますが、今までのと違うのは「背景画像」を切り替えるという点です。背景画像をフェード、スライドさせながらスライドショー的に動かすことで、少し変わった見せ方ができるようになります。

背景画像をフェード・スライドなどで切り替え出来る「jquery-bgswitcher」

背景画像を自動的に切り替えたいという要望はありそうなのと面白そうだったので紹介したいと思います。記述も比較的簡単なので簡単に実装できそうです。背景画像の動かし方としてフェード、スライドといったアニメーションの指定も可能ですし、工夫次第では色々な見せ方を実装することが出来るのではないでしょうか。

jquery-bgswitcherの実装方法について

jquery-bgswitcherのダウンロード
jquery-bgswitcherのダウンロードより、赤枠のボタンをクリックしてファイルをダウンロードしてください。ダウンロードしたファイルの中から「jquery.bgswitcher.js」「style.css」を使います。

また、http://jquery.com/よりjquery.min.jsもダウンロードしてください。
(jQuery 1.7.x以上が必要のようですので、注意してください)

基本的な実装サンプル

サンプルソース sample1.html

<
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.bgswitcher.js"></script>
<script>
$("document").ready(function(){
  $(".box").bgswitcher({
    images: ["画像URL1","画像URL2","画像URL3","画像URL4","画像URL5"]
  });
});
</script>
 
<div class="box">
  <p>背景画像が自動で切り替わります。</p>
</div>

1,2, 3行目でダウンロードしたファイルを読み込んでいます。

4~10行目が背景画像の切り替えの実行、設定をしている部分です。
このサンプルでは設定しているのは画像のみのシンプルな形です。切り替えに使いたい画像の数だけ画像URLを記述します。

12~14行目が背景画像を表示するエリアです。<div class=”box”>の領域の背景画像を切り替えるので6行目の記述で $(“.box”).bgswitcher({ と指定しています。

エフェクトを指定して背景画像を切り替え

画像を切り替えるアニメーションは、デフォルトではフェードになっていますが、縦にスライド、横にスライドなど他にも用意されており指定することが可能です。
fade、blind、clip、slide、dropなどを指定出来ます。

<script>
$("document").ready(function(){
  $(".box").bgswitcher({
    images: ["画像URL1","画像URL2","画像URL3","画像URL4","画像URL5"],
    effect: "slide"
  });
});
</script>



紹介しているサンプルは<div>要素の背景画像を切り替えていますが、<body>などの背景画像も同様に切り替えることが可能です。

他にも「切り替えの間隔」「エフェクトの時間」「背景画像の順番をシャッフルする」など設定できますので詳しくは、rewishを確認してみてください。

実装時の注意点「要素の重なりについて」

コメント欄にてご指摘頂いた内容を追記しました。H26.9.19
ご指摘ありがとうございます。

上で紹介したサンプルソースでは<div>要素1つに対して実装する記述になっていますが、実際に実装する場面では要素が重なるような構造になるかと思います。

<div class="main">
  <div class="box">
    <p>背景画像が自動で切り替わります。</p>
  </div>
</div>

上記のような場合で外側の<div class=”main”>に対して背景色や背景画像などを指定していた場合には思ったように実装出来ないことがあります。

↑↑のように外側に要素に背景色を指定している場合は、背景色が手前に表示されてしまい、背景画像を動かしている部分が見えない状態になってしまいます。

上記の解決方法としては、CSSにて要素の重なりの順序を指定する必要があります。

<style type="text/css">
#main{
  background-color:#000;
  position:relative;
  z-index:1;
  padding:20px;
 }
#box {
  z-index:2;
}
</style>

z-indexプロパティは、要素の重なり順序を指定する際に使用します。
外側の<div class=”main”>に対して、position:relative; z-index:1;を指定しています。
内側の<div class=”box”>に対して、 z-index:2;を指定して順序を明確にしています。
(z-indexの値が大きいものほど上になります)
z-indexを指定するためには、親要素にpositionプロパティでstatic以外の記述が必要なので親要素に対してposition:relative;を指定してます。

↑↑ 背景色の黒も表示されて、その上に背景画像を動かす<div class=”box”>が重なっているかと思います。

複数の要素が重なっている場合は、明確な順序を指定することで実装することが出来ます。以上、実装する際の注意点でした。

参考 z-indexプロパティについて
z-indexの仕組み


背景画像なのでメインでクリックしてもらうような部分でもないので、使いどころが難しいかもしれませんが、コンテンツ内のアクセントとしては面白そうですよね。ぜひ、活用してみてください。

背景関連 よろしければこちらもどうぞ


要素の背景色を自動的に切り替えることも可能です。切り替える秒数なども指定できるので、じわじわと色が変わっていくのがわかるようにすることも出来ます。また、切り替える色も複数指定できますし、ランダムに色を変えたりなんてことも!

TABLEのセルの背景色に関する記事になります。マウスオーバーでセルの色を変えることができるので複雑な表などは見る際の行ずれを防ぐ意味でも面白い仕組みだと思います。見やすく、使い勝手の良い表を作成するときには役立つ仕組みです。

スライダーに関する別記事





Comment

  1. みゅこ より:

    sample1.htmlってどれですか?
    ダウンロードしたフォルダに入っていませんでした。
    それからminが1.7以上という事ですが1.11~でも大丈夫ですよね?

  2. peacepopo より:

    みゅこさん
    コメントありがとうございます。
    > sample1.htmlってどれですか?
    > ダウンロードしたフォルダに入っていませんでした。
    ダウンロードしたファイルからは「jquery.bgswitcher.js」「style.css」だけを利用します。
    sample.htmlはダウンロードしたフォルダには入ってません。
    ご自身で新規に作成するファイルのことです。
    ですので、ファイル名は任意の名前です。
    > それからminが1.7以上という事ですが1.11~でも大丈夫ですよね?
    参照、公開元のサイトに1.7以上と記載がありますので制限があるのかと思われます。
    1.11等の古いバージョンは試しておりません。

  3. なな より:

    body全体の背景に実装したいのですが参照元にも方法が記載されておらず、
    jsにあまり詳しくないので、どこをどのように書き換えたら良いのか分からずに
    途方に暮れております。
    よろしければ、改変のポイントを教えていただきたいです。

  4. peacepopo より:

    ななさん
    コメントありがとうございます。
    >body全体の背景に実装したい
    サンプルソースにある記述と同様に背景画像を表示したい要素にclassを指定します。
    bodyに表示したい場合は、 <body class="myname"> のような記述をして
    (myname の部分は任意に決めてください)
    スクリプト実行部分で bodyに記述したクラス名を指定すればいけると思います。
    例) $(".myname").bgswitcher({
    以上、お試しください。

  5. Phantom より:

    bgswitcherの記事、大変参考にさせていただきました。
    実装の際に、初心者向けではあると思いますが気づいた点を記しておきます。
    ボックスの重なりの順序を明確にすることです。
    例えば・・・
    <body>
    <div id="wrapper">
    <div id="box">・・・</div><!–box END–>
       ・
       ・
       ・
    </div><!–wrapper END–>
    </body>
    上記のような構造になっている場合に、id="box"に対してbgswitcherを使いたい場合には、
    id="wrapper"に対して背景色や背景画像を指定しているとbox内の画像がwrapperの背景色
    や背景画像の下になり正常に表示されませんので、wrapperとboxにz-indexプロパティにて
    明確な重なり順序を指定します。
    z-indexを指定するためには、親要素にpositionプロパティでstatic以外の記述が必要なので
    #wrapper { position:relative; z-index:1; }
    #box { z-index:2; }
    などのように指定すると重なり順序はid="box"がid="wrapper"の上に来ますので正常表示されます。
    以上、ご報告までに

  6. peacepopo より:

    Phantomさん
    ご指摘ありがとうございます。
    記事内ではcssの記述については触れておりませんでしたので
    実装する際の注意点として、また追記したいと思います。

  7. charitas より:

    初めましてなかなか見つからず
    困っています
    こちらのサイトでしたら解決するのではないかと
    思い お願いに上がりました
    タグに関しては全くの無知状態ですあちこちのタグお借りして
    設定したものですその中で是非お力ご教授頂きたく
    お願いに上がりました

    未完成のhpです
    ttp://egretsagi.fc2web.com/isa9.html

    の中央画像の下につくページングを非表示する方法
    どうかご教授頂きたくお願いあがりましたどうか
    よろしくお願いいたします

    • peacepopo より:

      charitas 様

      コメントありがとうございます。

      ソース確認させて頂いたところスライダーに「bxSlider」を使われているようですので下記サイトが使い方の参考になるかと思われます。
      https://stand-4u.com/plugin/bxslider.html

      ソースの8行目付近の下記部分でスライダーの設定が可能です。(上記サイト参考)
      $(‘.slider’).bxSlider({
      auto: true,
      pause: 5000,
      });

      ↓↓↓ オプションで「pager」 ページ送りを追加するかどうかの設定が可能

      $(‘.slider’).bxSlider({
      auto: true,
      pause: 5000,
      pager: false,
      });

      —————————————-
      上記の方法でうまくいかない場合は、CSS(スタイルシート)で非表示にする方法もあります。
      ソースの47行目付近のCSSを記述している部分に下記の記述を追加
      ページングを表示しているエリアを非表示にするCSSです。
      .bx-controls.bx-has-controls-direction.bx-has-pager{display:none;}

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

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

スポンサードリンク
PAGE TOP ↑