Now Loading...

背景画像をスライドさせたりフェードさせたり。簡単 bgswitcher.js

背景画像をスライドさせたりフェードさせたり。簡単 bgswitcher.js

表面の要素を固定し、その後ろで画像をスライドさせたいとき。

背景画像を切り替えられるプラグイン「bgswitcher.js」を、トップページで使ってみました。

 

 

bgswitcher.jsをダウンロード

開発リポジトリはこちら

https://github.com/rewish/jquery-bgswitcher

html

<div class="bg-slider">
   <h1 class="bg-slider-title">タイトル</h1>
</div>

css

.bg-slider {
  width: 100vw;
  height: 100vh;
  background-position:center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg-slider-title{
  text-align:center;
  color: #fff;
  font-size: 32px;
  font-weight: bold;
}

js

<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: ['画像のパス/画像1','画像のパス/画像2','画像のパス/画像3'], 
  interval: 3000,
  loop: true,
  shuffle: true,
  effect: "fade", // fade,blind,clip,slide,drop,hide
  duration: 500,
  easing: "swing" // linear,swing
   });
  });
</script>

 

エフェクトや動き、ループの有無なども指定。

思いの外実装が簡単。サクサク動いてます。おすすめ。

 

 

share on

TIPS&NOTE TOPへ