背景画像のスライドアニメーションのため、Vegas2を導入してみました。

このブログではなく、富山市議会議員 しきだ博紀 公式ウェブサイトで導入しています。

必要なファイルは、次の通りです。

1. vegas.min.css
2. vegas.min.js
3. overlaysフォルダ内の画像（オーバーレイ表示のため）

GitHub - jaysalvat/vegas: Vegas is a jQuery/Zepto plugin to add beautiful backgrounds and Slideshows to DOM elements.からダウンロードしてください。

スクリプトの呼び出し

スクリプトを呼び出すHTMLソースは次の通りです。クラス名をvegas（任意）としたspan要素（任意）の背景に表示させています。
ファイルへのパスは、アップロードしたご自身の環境に置き換えてください。

{ src: '/images/vegas_00.jpg' }

で、表示させる画像を配列に入れます。

<link rel="stylesheet" href="/vegas/vegas.min.css">
<script src="/vegas/vegas.min.js"></script>
<script>
$(function(){
  $('.vegas').vegas({
    slides: [
     { src: '/images/vegas_00.jpg' },
     { src: '/images/vegas_01.jpg' },
     { src: '/images/vegas_02.jpg' },
     { src: '/images/vegas_03.jpg' },
     { src: '/images/vegas_04.jpg' },
     { src: '/images/vegas_05.jpg' },
     { src: '/images/vegas_06.jpg' },
     { src: '/images/vegas_07.jpg' },
     { src: '/images/vegas_08.jpg' },
    ],
    align: 'right',
    valign: 'top',
    delay: 6000,
     timer: true,
     overlay: '/vegas//overlays/01.png',
     animation: 'random',
     transition: 'blur',
     transitionDuration: 1000,
  });
});
</script>

HTMLソース

HTMLソースは次の通りです。クラス名をvegasとしたspan要素の背景に表示させています。

<header>
<h1>富山市議会議員 しきだ博紀 公式ウェブサイト<span class="vegas"></span></h1>
</header>

オプションも豊富です。デモを見ながらお気に入りのセッティングを試すことが出来ます。

Set Up - Documentation - Vegas Background SlideShow

導入はとても簡単なので、是非お試しください。