雄大な自然や景色などがWebサイトの背景で次々に切り替わるのってかっこいいですよね。
それが簡単に実現できるjQueryプラグインがあったので使ってみました。
事前準備
今回は下記のフォルダ校正で行います。
imgフォルダの中にいくつか画像を入れます。
index.htmlを編集していきます。
最低限の基本的な使い方
基本中の基本
このように書きます。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.css">
<script type="text/javascript">
$(document).ready(function(){
$("body").vegas({
slides: [
{ src: "img/image01.jpg" },
{ src: "img/image02.jpg" },
{ src: "img/image03.jpg" },
{ src: "img/image04.jpg" },
{ src: "img/image05.jpg" },
{ src: "img/image06.jpg" }
]
});
});
</script>
</head>
<body>
</body>
</html>jQueryとプラグイン、CSSファイルは全てCDNを使用します。
「slides」に切り替えたい画像を設定して終わりです。
これを実行するとこのようになります。
一定時間ごとに画像が切り替わります。
自然な切り替えにする
これだけだと、ただ単に画像が切り替わっていくだけなので、悪くはないのですがかっこよさに欠けます。
そこで、オプションをいくつか追加して、自然な切り替えを実現していきます。
オプションはかなり色々ありますが、「transition」と「animation」を指定するだけでも大分それっぽくなります。
切り替えの時間とかを細かくカスタマイズしたいときは、他のオプションについても設定する必要があります。
transitionは、切り替えの仕方を設定できます。
「transition」の設定
transitionは何も記述しない場合は、デフォルト値として「fade」になります。「fade」でも十分なのですが、ここでは別のものを設定してみます。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.css">
<script type="text/javascript">
$(document).ready(function(){
$("body").vegas({
transition: "blur",
slides: [
{ src: "img/image01.jpg" },
{ src: "img/image02.jpg" },
{ src: "img/image03.jpg" },
{ src: "img/image04.jpg" },
{ src: "img/image05.jpg" },
{ src: "img/image06.jpg" }
]
});
});
</script>
</head>
<body>
</body>
</html>また、複数設定することもできます。（どの設定が適用されるかはランダムに決まります。）
transition: [ "fade", "burn", "flash" ]「animation」の設定
animationは、画像や動画の表示のされ方を設定できます。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.css">
<script type="text/javascript">
$(document).ready(function(){
$("body").vegas({
animation: "kenburns",
slides: [
{ src: "img/image01.jpg" },
{ src: "img/image02.jpg" },
{ src: "img/image03.jpg" },
{ src: "img/image04.jpg" },
{ src: "img/image05.jpg" },
{ src: "img/image06.jpg" }
]
});
});
</script>
</head>
<body>
</body>
</html>「kenburns」を設定すると、このように画像が表示される時にズームアウトのような感じになります。
こちらもtransitionと同様に、複数設定することもできます。（どの設定が適用されるかはランダムに決まります。）
また、animationは「random」というのも設定できます。これは全ての設定値からランダムとなります。（全部ズームアウトが基調となっているのでわかりづらいですが。）
animation: "random"どちらも公式サイトにて簡単にシミュレーションができるので、参考にしてみてください。
最後に
画像だけでなく動画を設定することも可能です。
他にも色々なオプションやメソッドもあります。
また今度試してみたいと思います。
コメント