背景画像のスライダーを簡単に実装！jQueryプラグイン『Vegas2』
- マークアップ
みなさんこんにちは！フロントエンドエンジニアの井上です。
昨年11月に中途で入社し早半年が経とうとしています。
この半年間でいろいろな案件に携わらせていただき、その中でも「こいつは使えそうだ」と思ったjQueryプラグインをご紹介します。
「この背景画像スライダーにしたい～」
そうデザイナーに言われたとき、どうやって実装しますか？
以前の私は、slickを利用したスライダーを作りその上にコンテンツをpositionで載っけて背景画像のように見せて実装していました。(結構無理矢理ですね) それでもいいのですが、デザイン等の兼ね合いで違う方法を取りたいときもあります。
そこで、「背景画像をそのままスライダーにできるプラグインがあるのでは？」と思い調べたら、こちらの『Vegas2』がヒットしました。もっと早く調べてれば良かった。
デモはこちらで確認できます。
デモページ
では早速使い方を紹介していきます！
必要ファイルの準備
まずVegas2を公式サイトもしくはGitHubからダウンロードします。 ダウンロードしたファイルの中から、使用するのはvegas.min.cssとvegas.min.jsの2つです。
これをHTMLファイルの<head>内で読み込みます。
(jQueryを先に読み込むのを忘れずに！)
<head>
・・・中略・・・
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"> </script>
<link rel="stylesheet" href="css/vegas.min.css">
<script type="text/javascript" src="js/vegas.min.js"></script>
</head>
ここまでできたら、あとは背景に使用する画像を用意してスクリプトを記述します。
Vegas2の実行
エレメントをスライドさせる場合はidを指定、全体に適用させる場合はbodyを指定するといいと思います。
$(function() {
$('#slider').vegas({
slides: [
{ src: 'images/bg_img01.jpg' },
{ src: 'images/bg_img02.jpg' },
{ src: 'images/bg_img03.jpg' }
],
delay: 5000,
transitionDuration: 2000,
transition: 'fade',
});
});
細かい設定の各オプションは、こちらから確認できます。
結構いろいろカスタマイズできます。
ちなみに、環境によっては正しい高さが取得できず、背景画像が潰れてしまう現象が起こりました。
私は実際に、背景の上に載せるコンテンツの読み込みに時間がかかってしまい、先にVegas2の処理が実行されて正しい高さを取得できない事態に遭遇しました。
そういうときは、ページ全体の読み込みが終わってから処理を行うように、jQueryの実行タイミングを調整してあげればOKです！
フロントエンド界隈は進歩が速いですよね
最近では複雑な動きをウェブページに実装する機会も多いかと思います。
CSSもかなり進化してきてはいますが、JavaScriptを使用しないと実現できないような動きがまだまだあります。
そんな難しい動きも実装できるように、常日頃から勉強していかないといけないな～と痛感しました。
技術のトレンドの移り変わりも早く、ちょっと前まで主流だったものがあっという間に過去の産物になっていたりします。
普段からアンテナを張って情報収集して、良い技術をいち早く導入できるようになりたいですね。
そして新入社員のみなさん、一緒に頑張って勉強していきましょう！笑