Vegas2で背景画像のスライドアニメーション
![Vegas2のサイト](https://www.shikidahironori.jp/music/assets_c/2018/01/vegas2-thumb-320xauto-3246.jpg)
背景画像のスライドアニメーションのため、Vegas2を導入してみました。
このブログではなく、富山市議会議員 しきだ博紀 公式ウェブサイトで導入しています。
必要なファイルは、次の通りです。
- vegas.min.css
- vegas.min.js
- 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
導入はとても簡単なので、是非お試しください。
コメント