自然の写真などをかっこよく切り替えられるjQueryプラグイン「Vegas Background SlideShow」を使ってみた

IT関連

雄大な自然や景色などが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"

どちらも公式サイトにて簡単にシミュレーションができるので、参考にしてみてください。

Transitions - Documentation - Vegas Background SlideShow

最後に

画像だけでなく動画を設定することも可能です。

他にも色々なオプションやメソッドもあります。

また今度試してみたいと思います。

コメント

タイトルとURLをコピーしました