てきとうな説明でてきとうに作ろう

Vegas

サンプル

別窓

概要

公式
スライドショーしてくれます。
切り替えエフェクトがすんごい豊富です。スタイリッシュでかっこいい。
あまりのかっこよさにこのサイトのインデックスページの背景に使用しました。
画像だけでなく動画にも対応しているそうですが、とりあえず画像について記述します。

いつものごとくサンプルでは自由にカスタムができて、その設定を出力するようにしてあります。

2019.08


やりかた

公式サイトの右下にあるDOWNLOADの「vegas.zip」手に入れ、解凍しましょう。


解凍した「vegas」フォルダごと自サイトの場所へコピーします。

まず、headerに以下のコードをコピペします。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="ファイルの場所/vegas.min.css">
<script src="ファイルの場所/vegas.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('body').vegas({
            slides: [
                { src: '画像1' },
                { src: '画像2' },
                { src: '画像3' },
            ],
            //ここでオプション設定
        });
    });
</script>

2、3行目のファイルの場所は書き換えてください。
8~10行目に画像のパスを設定します。必要数「{ src: '画像のパス' },」の形で羅列していってください。
12行目がオプション設定部分です。詳細はこちらにまとめました。

上のコードでは5行目部分でbodyを指定していますが、背景全体は嫌、ここの部分だけでスライドショーしてほしいっていう方はそこの要素を指定してください。

別窓
例えばこんなことができます。いらすとやさんありがとごじます。
Vegasをさせたい要素にクラス名が<div class="toothpaste">のように設定してあれば、6行目を「$('.toothpaste').vegas({」とします。
要素にIDを<div id="toothpaste">のように設定してあれば、6行目を「$('#toothpaste').vegas({」とします。

また、スライドごとに設定できるオプションがあります。
slidesに設定した画像のパスの後ろに、こんな感じでカンマで区切って羅列します。

            slides: [
                { src: '画像1'},
                { src: '画像2', transition: 'zoomOut', delay: 3000 },
                { src: '画像3' },
            ],
この例なら画像2のみzoomOutし、3秒で次のスライドに行くようになります。
1枚目は右寄せにしたいけど2枚目は左寄せにしたい、このスライドは長く見せたい、切り替えを面白くしたい等、さらに細かい事がしたい方はこちらを参考にしてください。
こちらで個別指定が〇になっているオプションを設定できます。


オプション

サンプルをいじると設定値を出力してくれるので、好きな設定を選んでこの部分に差し替えてください。

オプション名 適当な説明 設定値 デフォルト値 個別指定
slide 何枚目のスライドから始めるかの設定。最初のスライドは0番目です。 0~スライド枚数-1の範囲の整数 0
preload 画像と動画両方をプリロードとかいう先行読み込みをするか。大きな画像や動画だと効果があるみたいです。 するならtrue、しないならfalse false
preloadImage 画像のみプリロードとかいう先行読み込みをするか。
ここをtrueにするなら、preloadはfalseにします。
するならtrue、しないならfalse false
preloadVideo 動画のみプリロードとかいう先行読み込みをするか。
ここをtrueにするなら、preloadはfalseにします。
するならtrue、しないならfalse false
timer 画像下部にタイマーバーを表示するか。
タイマーバーのカスタマイズをしたい方は「.vegas-timer-progress」をいじってください。
表示するならtrue、表示しないならfalse true
overlay 画像にイメージをオーバーレイするかどうか。
「overlays」というフォルダに9種類のドットパターンが用意されているので、そのパスを指定してもOK。
画像をオーバーレイさせたいならこれらのドットパターンのように画像のパスを指定すればいいですが、cssで作ったものをオーバーレイさせたい場合はtrueにして、「.vegas-overlay」をいじってください。サンプルでは虹色にしてみました。
trueかfalse、または画像のパス false
autoplay スライドショーを自動的に開始するかどうか。
するならtrue、しないならfalse true
loop スライドショーをループさせるかどうか。
するならtrue、しないならfalse true
shuffle スライドの表示順番をシャッフルするかどうか。
するならtrue、しないならfalse false
delay 次のスライドを表示するまでの時間。
整数。単位はミリ秒。 5000
cover 画像のサイズを調整できます。 trueなら表示させる所の大きさに合わせて何もない部分がないように拡大縮小され、falseなら表示させる所に画像全体が表示されるように拡大縮小されます。
'repeat'にすると画像はそのままのサイズで、表示させる所いっぱいに画像が繰り返されます。
null
color スライドの背景色。
coverがtrueだと空白部分がないのであまり意味がないですが、透過画像やcoverがtrue以外の場合は設定した方がいいです。
'#f2f2f2', 'whitesmoke', '#000'等のカラーコードや色の文字列 true
align 横方向の配置。これもcoverがtrueだと意味ない気がします。
中央寄せ、右寄せ、左寄せ、またはパーセントで割合指定もできます。
公式の説明に'top''bottom'があったのでいちおう設定値にも記述しましたが、横方向の話なのでこの二つは意味ないと思います。
'center' 'top' 'right' 'bottom' 'left'、または'n%'のようなパーセンテージ指定 'center'
valign 縦方向の配置。これもcoverがtrueだと意味ない気がします。
中央寄せ、上寄せ、下寄せ、またはパーセントで割合指定もできます。
公式の説明に'right''left'があったのでいちおう設定値にも記述しましたが、縦方向の話なのでこの二つは意味ないと思います。
'center' 'top' 'right' 'bottom' 'left'、または'n%'のようなパーセンテージ指定 'center'
transition 次のスライドに遷移するときの切り替えエフェクト。なんかいっぱい種類がある。 'fade', 'fade2', 'blur', 'blur2', 'flash', 'flash2', 'negative', 'negative2','burn', 'burn2', 'slideLeft', 'slideLeft2', 'slideRight', 'slideRight2','slideUp', 'slideUp2', 'slideDown', 'slideDown2', 'zoomIn', 'zoomIn2','zoomOut', 'zoomOut2','swirlLeft', 'swirlLeft2', 'swirlRight', 'swirlRight2'
または'random'
'fade'
transitionDuration transitionしている時間。
'auto'を指定するとdelayの設定値と同じになります。
整数。単位はミリ秒。または'auto'。 1000
firstTransition 最初に再生されるスライドのtransition。 transitionの設定値を参照 null
firstTransitionDuration 最初に再生されるスライドのtransitionDuration。 transitionDurationの設定値を参照 null
animation スライドを表示中にするアニメーションを設定します。めちゃくちゃかっこいいと思います。 'kenburns', 'kenburnsLeft', 'kenburnsRight', 'kenburnsUp', 'kenburnsUpLeft', 'kenburnsUpRight','kenburnsDown', 'kenburnsDownLeft', 'kenburnsDownRight'
または'random'
null
animationDuration animationしている時間。
'auto'を指定するとdelayの設定値と同じになります。
整数。単位はミリ秒。または'auto'。 'auto'
slidesToKeep 次のスライドに行く前にバックグラウンドで保持するスライドの数。
coverがtrueだと気にならないかもしれませんが、falseでスライドの大きさが揃っていないと前のスライドが背景にはみ出ることになります。
0~スライド枚数の範囲の整数 1

inserted by FC2 system