jQueryプラグイン「vegas.js」を使った背景画像のスライダーです。
背景画像でスライド表示するので、デザイン向きなスライダーで印象・イメージを伝えるのに向いています。
トップページの最初の画面（ファーストビュー）にフルスクリーンでスライドさせると、印象・イメージにインパクトも追加され、効果的に画像を魅せることができます。
フルスクリーンで画面全体に画像を表示する時は、画質やファイルサイズに注意しておきましょう。
画質が悪くなると印象・イメージも下がり、逆効果につながってしまいます。
また、ファイルサイズが大きすぎると表示されるまでに時間がかかり、ページ閲覧の機会を失います。
ボックスの背景画像ならどこでも使えるので、フルスクリーン以外でも活用できるのが特徴です。
フルスクリーン・スライダーのデモ
See the Pen 18-3-2 by Rayout-gw (@Rayout-gw) on CodePen.
デモページでフルスクリーンスライダーを作成し、仕組みを理解していきましょう。
jQueryの記述や、フルスクリーンで表示できるのを確認してから、猫カフェのページなどでも同じようにチャレンジしてみましょう。
作成手順
chap18
bgslider-demo（フォルダを作成）
demo.html（デモページを作成）
images（フォルダを作成）
〜.jpg（画像ファイルをコピーして保存）
画像ファイルは何でもいいですが、できれば横長の画像がいいです
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.js"></script><script>は、javascriptファイルを読み込む時に使います。
必ず、jQueryライブラリを先に読み込みましょう。
オフラインでも表示するには、各ファイルをDLする必要があります。
</body>の１行上あたりに記述します。
<script>
$('body').vegas({
slides: [
{ src: 'images/neko_2.jpg' },
{ src: 'images/neko_3.jpg' },
{ src: 'images/news_6.jpg' },
{ src: 'images/news_8.jpg' },
{ src: 'images/news_9.jpg' },
],
transition: ['fade',],
animation: 'random'
});
</script>・2行目の「body」が表示する場所のタグ名です。他のタグ名やid名などに置き換えると….
・4行目の記述のように、ファイル名を設定していきます。
・javascriptの記述が分からなくても、雰囲気でわかりますね。
・10,11行目は、次のオプション設定の箇所です。
公式サイトで、オプション設定がコピーできるので確認しましょう。
オプション設定の説明した動画があるので確認してください。