プログラミング

【コピペ可】背景画像をスライドさせる方法を簡単に紹介します。

 

Iphone、スマートフォン、電話、通信、モバイル

今回は、背景画像を使って自動でスライドさせる方法を紹介します。

簡単に説明するとjQueryの「bgswitcher」というプラグインを使用することで、スライドを可能にしていきます。

デモサイトを見てイメージを掴んでからコードを見ると理解がしやすいかもです。

以下に実装方法を説明していきます。

プラグインの実装準備

テーブルの上の黒と銀のラップトップコンピューター

まず、はじめにHTMLにjQueryを読み込みます。

今回はjQueryのGoogle CDNを使って読み込んでいきます。

3.xスニペット

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

次にGitHubから「bgswitcher」をダウンロードしましょう。

囲んであるボタンをクリックしてファイルをダウンロードできます。

今回は「jquery.bgswitcher.js」というファイルだけ使います。

そうしましたらHTMLのheadタグの中に

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

<script src="js/jquery.bgswitcher.js"></script>

こちからを書き込みましょう。

これで準備はOKです。

コードを入れて実装

灰色のラップトップコンピューターがオン

では、コードを紹介していきます。

まずはHTMLテキストです。

以下説明していくclass名やテキスト内容はご自由に変更して調節してください。

<div class="bg-slide">

  <h1 class="bg-slide-title">titleを入力してください</h1>

</div>

次はCSSです

.bg-slide {

width: 100vw;

height: 100vh;

background-position: center;

background-size: cover;

display: flex;

align-items: center;

justify-content: center;

}

.bg-slide-title{

color: #fff;

font-size: 48px;

line-height: 1.5;

font-weight: bold;

text-align:center;

}

widthとheightに書いてある、100vwと100vhは簡単にいうと全表示させるよと言うことです。

100%とはまた基準の取り方が違うのでそれはまた詳しく説明します。

最後にjQueryのコードです。

$(window).load(function() {

  $('.bg-slide').bgSwitcher({

    images: ['images/1.jpg', 'images/2.jpg', 'images/3.jpg'], // 切り替える背景画像を指定

    interval: 4000, // 背景画像を切り替える間隔を指定 3000=3秒

    loop: true, // 切り替えを繰り返すか指定 true=繰り返す false=繰り返さない

    shuffle: true, // 背景画像の順番をシャッフルするか指定 true=する false=しない

    effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定

    duration: 2000, // エフェクトの時間を指定します。

    easing: "swing" // エフェクトのイージングをlinear,swingから指定

  });

});

コメント要素を使って各行の説明を記載しておきました。

いろいろなオプションがまだあるので、紹介しておきます。

キータイプデフォルト説明
Imagesアレイ[]背景画像
interval5000切り替え間隔
startブール本当初期化後にスイッチをオンにします(メソッドの呼び出し
loopブール本当スイッチをループさせる
shuffleブール画像の順序を入れ替える
effectストリングフェードエフェクトタイプ(内蔵エフェクトタイプ
duration1000効果時間
easingストリングスイング効果緩和

まとめ

白い罫線入り用紙セレクティブフォーカス写真のペン

以上が背景画像をスライドさせる方法でした。

背景画像をスライドさせるだけではない、まだまだ色々なプラグインがあるのでまた役立つものがありましたら紹介します。

他にもプログラミングで有益な情報を伝えていきますので、また機会がありましたらどうぞよろしくお願いします。

それでは、みなさん良い夜を。

-プログラミング

© 2022 たつき BLOG