Help us understand the problem. What is going on with this article?

【jQuery】背景画像をフェードで切り替えるBgSwitcher

More than 1 year has passed since last update.

HTML/CSSの理解と、jQueryの基本的な使い方を復習するために、PAS-POLの模写を行いました。

模写を行うと、新しいデザインやコードに触れることができて、スキルアップに繋がっているなーと実感が持てます。

今回学んだjQueryを使って背景画像をフェードさせる「BgSwitcher」についてまとめておきたいと思います。

BgSwitcher実装

  • 公式サイトからjquery.bgswitcher.jsをダウンロード
  • HTML/CSS、javascriptをコピペ
  • オプションの追加

公式サイト

Demo - jQuery.BgSwitcher

HTML/CSS、javascriptをコピペ

<div class="bg-slider">
 <h1 class="bg-slider__title">BGSWITCHER DEMO PAGE</h1>
</div>
.bg-slider {
    width: 100vw;
    height: 100vh;
    background-position:center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bg-slider__title{
    color: #fff;
    font-size: 48px;
    line-height: 1.5;
    font-weight: bold;
    text-align:center;
    text-shadow: 1px 1px 1px #000;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="js/jquery.bgswitcher.js"></script>
<script>
jQuery(function($) {
    $('.bg-slider').bgSwitcher({
        images: ['img/bg1.jpg','img/bg2.jpg','img/bg3.jpg'], // 切り替える背景画像を指定
    });
});
</script>

javascriptのimagesの部分に表示したい画像パスを書けばOK

images: [‘img/bg1.jpg’,’img/bg2.jpg’,’img/bg3.jpg’],

ただし、サイトによっては色々とカスタマイズしないといけないケースもありますので、CSSを修正したりその辺りは臨機応変に。

オプション

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="js/jquery.bgswitcher.js"></script>
<script>
jQuery(function($) {
    $('.bg-slider').bgSwitcher({
        images: ['img/bg1.jpg','img/bg2.jpg','img/bg3.jpg'], // 切替背景画像を指定
    interval: 3000, // 背景画像を切り替える間隔を指定 3000=3秒
        loop: true, // 切り替えを繰り返すか指定 true=繰り返す false=繰り返さない
        shuffle: true, // 背景画像の順番をシャッフルするか指定 true=する false=しない
        effect: "blind", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
        duration: 500, // エフェクトの時間を指定します。
        easing: "swing" // エフェクトのイージングをlinear,swingから指定
    });
});
</script>

以上で、背景画像をフェードで切り替えるjQueryの実装が完了です。

kei_1011
大阪在住のコーダーです。 PHPでいろいろ作りたい。
https://keibloglife.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした