「jQuery」の「Vegas」は、背景画像を、一定時間ごとに変更することができる「Javascript」プログラム。

「Vegas」のOfficialWeb「Vegas Background SlideShow」からファイルをダウンロードして、自身のWebに組み込んで使用する。
「Word Press」にも組み込み可能。

Back

「Vegas」のダウンロードファイルの中身

ダウンロードした「Vegas」ファイルには、・vegas.js
・vegas.min.js
・vegas.css
・vegas.min.css
・複数のオーバーレイ画像ファイル
が含まれています。
これに、背景にしたい画像を2つ以上用意する必要があります。

Back

「Vegas」の背景画像のスライドショーに必要なもの

「Vegas」ダウンロードファイル

・vegas.js
・vegas.min.js
・vegas.css
・vegas.min.css
・複数のオーバーレイ画像ファイル

自分で用意するもの

・画像ファイル２点以上（背景スライドショー用）
・「Javascript」外部ファイル（実行プログラムを記述）

「.min.js」「.min.css」などの「.min」が付く拡張子のファイルは、
改行やスペースなど、省略できるものを省いたファイルなので、「.min」が付いていないファイルと中身は同じ。
「.min」が付く拡張子のファイルは、
余計なものがないので、
処理速度が速い。

Back

「Vegas」に必要なファイルの格納場所

ファイル	格納場所
実行用「Javascript」外部ファイル	「Word Press」の使用している「テーマ」ディレクトリ内の「header.php」と同じディレクトリに配置。ファイル名は自由。「BackgroundSlide.jp」など。例：「WordPressのディレクトリ/wp-content/themes/テーマ名/header.php」
「Vegas」ディレクトリ・ファイル	「Vegas」の公式Webなどからダウンロードする。「Word Press」の使用している「テーマ」ディレクトリ内の「header.php」以下に配置。例：「WordPressのディレクトリ/wp-content/themes/テーマ名/header.php」
背景画像ファイル	「Word Press」ディレクトリ最上位の「index.php」ファイルがある階層以下にディレクトリにまとめて配置。

Back

「Vegas」ファイルの読み込み方法

「Vegas」をダウンロードできて、ファイルを設置できたら、
次は、「Vegas」のファイルをWebに読み込んで、
実行できるように設定します。

読み込みが必要な「Vegas」ファイル

読み込みが必要な「Vegas」ファイルは、
・https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js（直接リンクさせる）
・vegas.js
・vegas.css
・実行コードを記述する「Javascript」ファイル（ファイル名は自由）
です。

読み込みコードを記述するファイル

読み込みコードを記述するファイルは、
・使用しているテーマの「header.php」
に記述します。
使用しているテーマの「header.php」内にある「head」タグ内の最後に記述。
「WordPressのディレクトリ/wp-content/themes/テーマ名/header.php」

記述方法は、いくつかありますが、
推奨されている方法がありますので、
できるだけ推奨の方法で行いたいのですが。。。。。

読み込みが上手に行かない時があるので、
直接シンプルに記述したりしています。

推奨されている「header.php」への書式

function add_files(){
wp_enqueue_style('ハンドル名','cssファイルのパス');
wp_enqueue_script('ハンドル名','jsファイルのパス');
}

//上記のファイル読み込み関数を「wp_enqueue_scripts」にフックさせる。
add_action('wp_enqueue_scripts', 'add_files');

読み込まれないこともあるので、シンプルに直接記述する方法も要チェック。

シンプルで確実な「header.php」への書式

推奨している記述方法で、反応しない時は、シンプルに直接記述して対応もできます。
ヘッダファイル内に記述したところ、問題なく機能しました。

<head>
既存のプログラムコード

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js">></script>
<script type="text/javaScript" src="<?php echo get_template_directory_uri() ?>/vegas/vegas.js" charset="utf-8"></script>
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/vegas/vegas.css" media="all">

<script type="text/javaScript" src="<?php echo get_template_directory_uri() ?>/実行プログラムファイル名.js" charset="utf-8"></script>
</head>

下記のような位置も良い。
ページを開いてすぐに実行する時に良い配置。
<head>
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/vegas/vegas.css" media="all">
</head>
<body>
<!–
コンテンツ
–>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js">></script>
<script type="text/javaScript" src="<?php echo get_template_directory_uri() ?>/vegas/vegas.js" charset="utf-8"></script>
</body>

Back

実行ファイル（Javascript）への記述

$(function() {
$('#ID名').vegas({
slides: [
{ src: './img/slide01.jpg' },
{ src: './img/slide02.jpg' },
{ src: './img/slide03.jpg' },
{ src: './img/slide04.jpg' }
],
//overlay: './wp-content/themes/twentyseventeen/js/vegas/overlays/01.png',
delay: 5000, //スライドまでの時間ををミリ秒単位で設定
timer: true, //タイマーバーの表示/非表示を切り替え
animation: 'random', //スライドのアニメーションを設定
transition: 'fade2', //スライド間のエフェクトを設定
transitionDuration: 4000 //エフェクト時間をミリ秒単位で設定
});
});

Back

CSSへの記述

#ID名 {
width: 100vw;
height: 100vh;
}

Back

アニメーションの設定方法

「アニメーション」は、
画像効果を適用するときの、視点の位置を決める設定。
視点を基点にして、トランジションなどが実行されます。

アニメーション	説明
kenburns	中央に視点を置いて、ズームアウトする。
kenburnsUp	上部に視点を置いて、ズームアウトする。
kenburnsDown	下部に視点を置いて、ズームアウトする。
kenburnsRight	右側に視点を置いて、ズームアウトする。
kenburnsLeft	左側に視点を置いて、ズームアウトする。
kenburnsUpLeft	左上に視点を置いて、ズームアウトする。
kenburnsUpRight	右上に視点を置いて、ズームアウトする。
kenburnsDownLeft	左下に視点を置いて、ズームアウトする。
kenburnsDownRight	右下に視点を置いて、ズームアウトする。
random	全てのアニメーションをランダムに実行。

アニメーション設定をカスタマイズする方法

「vegas」では、オリジナルのアニメーション設定をすることができます。
「.vegas-animation-オリジナルアニメーションの名前」として指定して設定を行う。

オリジナルのアニメーション作成する方法

//CSSに記述

.vegas-animation-kenburns {
animation: kenburns ease-out;
}

@keyframes kenburns {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}

ランダムモードに、オリジナルアニメーションを追加する方法

$('#ID名').vegas({
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg' },
{ src: '/img/slide3.jpg' }
],
animationRegister: [ 'myAnimation1', 'myAnimation2' ]
});

という記述で「Javascript」に追加する。

Back

トランジションの設定方法

「トランジション」は、スライドショーで、
次の画像に移行するときの、画像効果のことで、
画像ごとに、トランジションを指定することができる。
「Vegas」は、「CSS3」のトランジションを利用しています。
古いバージョンのブラウザはシンプルなフェードトランジションになります。

$('#ID名').vegas({
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg' },
{ src: '/img/slide3.jpg' }
],
transition: 'fade'
});

トランジション	説明
fade	フェードして次の画像へ移行する。
fade2	フェードして次の画像へ移行する。移行時に透明度あり。
slideLeft	左から移動してくるように次の画像へ移行する。
slideLeft2	左から移動してくるように次の画像へ移行する。移行時に透明度あり。
slideRight	右から移動してくるように次の画像へ移行する。
slideRight2	右から移動してくるように次の画像へ移行する。移行時に透明度あり。
slideUp	下から移動してくるように次の画像へ移行する。
slideUp2	下から移動してくるように次の画像へ移行する。移行時に透明度あり。
slideDown	上から移動してくるように次の画像へ移行する。
slideDown2	上から移動してくるように次の画像へ移行する。移行時に透明度あり。
zoomIn	ズームイン（拡大）しながら次の画像へ移行する。
zoomIn2	ズームイン（拡大）しながら次の画像へ移行する。移行時に透明度あり。
zoomOut	ズームアウト（縮小）しながら次の画像へ移行する。
zoomOut2	ズームアウト（縮小）しながら次の画像へ移行する。移行時に透明度あり。
swirlLeft	左回りに回転しながら次の画像へ移行する。
swirlLeft2	左回りに回転しながら次の画像へ移行する。移行時に透明度あり。
swirlRight	右回りに回転しながら次の画像へ移行する。
swirlRight2	右回りに回転しながら次の画像へ移行する。移行時に透明度あり。
burn	燃えるような印象の加工から画像へと移行する。
burn2	燃えるような印象の加工から画像へと移行する。移行時に透明度あり。
blur	ぼかし加工をなくしながら画像へと移行する。
blur2	ぼかし加工をなくしながら画像へと移行する。移行時に透明度あり。
flash	真っ白から画像へと移行する。
flash2	真っ白から画像へと移行する。移行時に透明度あり。

遷移時間は、「transitionDuration」オプションによって、ミリ秒単位で指定可能。
配列を指定することにより、画像ごとのトランジションも指定が可能。

トランジションを実行コードに記述する方法

$('#ID名').vegas({
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg' },
{ src: '/img/slide3.jpg' }
],
transition: [ 'fade', 'zoomOut', 'swirlLeft' ]
});

トランジションをカスタムする方法

「Vegas」において、
トランジションをカスタムすることができる。
カスタム方法は、
「.vegas-transition-オリジナルトランジション名」
という書式でCSS設定をすることで、トランジションを作成することが可能。

クラス名	説明
.vegas-transition-オリジナルトランジション名	スライド作成時に適応されるCSSスタイル。
.vegas-transition-オリジナルトランジション名-in	スライドが表示される時に適応されるCSSスタイル。
.vegas-transition-オリジナルトランジション名-out	スライドが消えるときに適応されるCSSスタイル。

オリジナルトランジションを作成するときのCSS書式

.vegas-transition-fade,
.vegas-transition-fade2 {
opacity: 0;
}

.vegas-transition-fade-in,
.vegas-transition-fade2-in {
opacity: 1;
}

.vegas-transition-fade2-out {
opacity: 0;
}

オリジナルトランジションをランダムモードに追加する方法

$('#ID名').vegas({
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg' },
{ src: '/img/slide3.jpg' }
],
transitionRegister: [ 'myTransition1', 'myTransition2' ]
});

Back