縦スクロールで画面いっぱいのスライドを切り替える縦長ページを作成する機会があったので、実装方法を紹介しようと思います。
有名なプラグインだとfullPage.jsがありますが、
- jQueryに依存している
- 最新版はライセンスが必要
などの問題があり使いにくいです…。
なので今回は、簡単にスライダーを作成できるJavaScriptライブラリ「Swiper」を使って縦スライド可能な全画面ページを作ってみました。
DEMOページと実装コードも紹介しているので、是非参考にしてみてください。
縦スライド可能な全画面ページの実装DEMO
まずは実際のページのDEMOを確認してみてください。
DEMOページの仕様は、以下の通りです。
- スライドのサイズ:縦・横画面いっぱい
- スライド移動方法:
- 画面をドラッグ or スクロール(マウスホイールも対応)
- ページネーションをクリック
- 画面をスワイプ(SPのみ)
DEMOと仕様が確認できたら、次で全体の実装コードをみていきましょう。
【コピペ用】縦スライド可能な全画面ページの実装コード
HTML・CSS・JavaScriptの実装コード全体を用意しました。
コピペするだけですぐに動くようにしていますので、自由にお使いください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vertical Slider DEMO</title>
<!-- CDN読み込み -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<!-- CSSファイル読み込み -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="swiper-container vertical-slider">
<div class="swiper-wrapper vertical-slider__wrapper">
<div class="swiper-slide vertical-slider__slide">SLIDE 1</div>
<div class="swiper-slide vertical-slider__slide">SLIDE 2</div>
<div class="swiper-slide vertical-slider__slide">SLIDE 3</div>
<div class="swiper-slide vertical-slider__slide">SLIDE 4</div>
<div class="swiper-slide vertical-slider__slide">SLIDE 5</div>
</div>
<div class="swiper-pagination vertical-slider__pagination"></div>
</div>
<!-- CDN読み込み -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- JSファイル読み込み -->
<script src="script.js"></script>
</body>
</html>
/* Google Fonts読み込み */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap");
/* 簡易リセットCSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* スライダー全体 */
.vertical-slider {
width: 100%;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}
/* スライド */
.vertical-slider__slide {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 10rem;
font-family: "Open Sans", sans-serif;
font-weight: bold;
color: #fff;
}
/* 1枚目のスライド */
.vertical-slider__slide:nth-child(1) {
background-color: #fa5457;
}
/* 2枚目のスライド */
.vertical-slider__slide:nth-child(2) {
background-color: #fa8925;
}
/* 3枚目のスライド */
.vertical-slider__slide:nth-child(3) {
background-color: #f6d51f;
}
/* 4枚目のスライド */
.vertical-slider__slide:nth-child(4) {
background-color: #01b4bc;
}
/* 5枚目のスライド */
.vertical-slider__slide:nth-child(5) {
background-color: #5fa55a;
}
/* SP時の文字サイズ調整 */
@media (max-width: 599px) {
.vertical-slider__slide {
font-size: 16vw;
}
}
/* アドレスバー・ツールバーを除いた100vhの高さを取得 */
function setHeight() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty("--vh", `${vh}px`);
}
setHeight();
window.addEventListener("resize", setHeight);
/* スライダーの設定 */
const verticalSlider = new Swiper(".vertical-slider", {
direction: "vertical",
slidesPerView: 1,
speed: 600,
mousewheel: true,
pagination: {
el: ".vertical-slider__pagination",
type: "bullets",
clickable: true,
},
});
これらをコピペすることで、DEMOページと同じ全画面の縦スライダーが実装可能です。
次の章でコードの解説をしていきますので、カスタマイズしたい・コードを理解したいという方はぜひ読んでみてください。
【解説】縦スライド可能な全画面ページの実装コードの解説
ここでは、Swiperの読み込みからHTML・CSS・JavaScriptのコード解説を行います。
手順1. Swiperを読み込む
SwiperはJavaScriptライブラリなので、使用するにはまず読み込む必要があります。
ここでは一番手軽で簡単な、CDNを使用して読み込む方法を紹介します。
<!-- CSSのCDN -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<!-- JavaScriptのCDN -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
上記の2行をHTML内に記入してください。
記入箇所は、以下の通りです。
<head>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="script.js"></script>
</body>
CSSは<head>
タグ内、JavaScriptは</body>
タグの直前で読み込むのが理想的ですね。
また、必ずCDNの後にstyle.css
やscript.js
を置くようにしてください。
これら以外にも読み込む方法はいくつかありますので、詳しくはSwiperの公式ページから確認してください。
手順2. HTMLでスライダーのタグとクラスを準備
ここでは、HTMLでスライダーを実装するためのタグを設置していきます。
まずは、Swiper公式が用意しているテンプレートを使用します。
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">SLIDE 1</div>
<div class="swiper-slide">SLIDE 2</div>
<div class="swiper-slide">SLIDE 3</div>
<div class="swiper-slide">SLIDE 4</div>
<div class="swiper-slide">SLIDE 5</div>
</div>
<div class="swiper-pagination"></div>
</div>
このまま使用してもいいのですが、CSSを上書きする用のオリジナルのクラスを設定します。
<div class="swiper-container vertical-slider">
<div class="swiper-wrapper vertical-slider__wrapper">
<div class="swiper-slide vertical-slider__slide">SLIDE 1</div>
<div class="swiper-slide vertical-slider__slide">SLIDE 2</div>
<div class="swiper-slide vertical-slider__slide">SLIDE 3</div>
<div class="swiper-slide vertical-slider__slide">SLIDE 4</div>
<div class="swiper-slide vertical-slider__slide">SLIDE 5</div>
</div>
<div class="swiper-pagination vertical-slider__pagination"></div>
</div>
ここでは、vertical-slider
というクラスを設定しました。
swiper-
クラスでデフォルトのスタイルを継承し、vertical-slider
クラスで今回のスライダーに必要なスタイルを上書きしていきます。
手順3. CSSでスライダーの見た目を装飾
ここでは、CSSでスライダーの見た目を装飾していきます。
/* Google Fonts読み込み */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap");
/* 簡易リセットCSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* スライダー全体 */
.vertical-slider {
width: 100%;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}
/* スライド */
.vertical-slider__slide {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 10rem;
font-family: "Open Sans", sans-serif;
font-weight: bold;
color: #fff;
}
/* 1枚目のスライド */
.vertical-slider__slide:nth-child(1) {
background-color: #fa5457;
}
/* 2枚目のスライド */
.vertical-slider__slide:nth-child(2) {
background-color: #fa8925;
}
/* 3枚目のスライド */
.vertical-slider__slide:nth-child(3) {
background-color: #f6d51f;
}
/* 4枚目のスライド */
.vertical-slider__slide:nth-child(4) {
background-color: #01b4bc;
}
/* 5枚目のスライド */
.vertical-slider__slide:nth-child(5) {
background-color: #5fa55a;
}
/* SP時の文字サイズ調整 */
@media (max-width: 599px) {
.vertical-slider__slide {
font-size: 16vw;
}
}
以上がCSSの全体コードです。
ここでは、機能に関わる重要なスタイルのみ解説していきますね。
/* スライダー全体 */
.vertical-slider {
width: 100%; /* 横幅を画面いっぱいに広げる */
height: 100vh; /* 縦幅を画面いっぱいに広げる */
height: calc(var(--vh, 1vh) * 100); /* 縦幅を画面いっぱいに広げる(アドレスバー・ツールバーの高さを除く) */
}
まずはスライダー全体を囲うvertical-slider
クラスに、横幅・縦幅を画面いっぱいに広げるように指定します。
横幅を画面いっぱいに広げるには、width: 100%
とするだけでOKですね。
縦幅に関してはheight: 100vh
と指定すると、スマホで見た場合に正しい値が設定されません。
そのため、CSS変数とJavaSCriptを併用して、スマホのアドレスバー・ツールバーの高さを除いた100vh
の値を指定しています。
これに関しては以下の記事で解説していますので、興味があれば読んでみてください。
大枠を画面いっぱいに広げることができたので、次は中のスライド要素に以下の記述をします。
/* スライド */
.vertical-slider__slide {
height: 100%;
width: 100%;
}
こうすることで、各スライドが親要素の100%、つまり画面いっぱいに広がるようになりました。
これ以外は背景色や文字など、見た目に関する指定なので、自由にカスタマイズしてください。
手順4. JavaScriptでスライダーの機能を設定
最後に、JavaScriptの実装コードを解説していきます。
/* 1. アドレスバー・ツールバーを除いた100vhの高さを取得 */
function setHeight() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty("--vh", `${vh}px`);
}
setHeight();
window.addEventListener("resize", setHeight);
/* 2. スライダーの設定 */
const verticalSlider = new Swiper(".vertical-slider", {
direction: "vertical", // スライダーの向きを縦にする
slidesPerView: 1, // 一度に1枚のスライドを表示
speed: 600, // 600msでスライドを切り替える
mousewheel: true, // マウスホイールやスクロールを有効にする
pagination: {
el: ".vertical-slider__pagination", // ページネーション要素のクラスを指定
type: "bullets", // ページネーションの形を指定
clickable: true, // ページネーションをクリック可能にする
},
});
JavaScriptで実装する内容は、以下の2つに大きく分かれます。
- スマホのバーを除いた100vhの高さを取得
- スライダーの設定
それぞれ解説していきますね。
JavaScript 1. スマホのバーを除いた100vhの高さを取得
CSSのパートで説明しましたが、height: 100vh
と指定すると、スマホで見たときにアドレスバー・ツールバーの高さ分はみ出してしまいます。
そのため、バーを除いた100vh
の高さをJavaScriptとCSSで設定する必要があります。
function setHeight() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty("--vh", `${vh}px`);
}
setHeight();
window.addEventListener("resize", setHeight);
このJavaScriptのコードを簡単に説明すると、
- アドレスバー・ツールバーを除いた画面縦幅の1%の値を取得して、CSS変数
--vh
に値を格納する関数を定義 - ページロード時&画面リサイズ時に関数を呼び出す
ということが起こっています。
ここでは詳しい説明はしませんので、気になる方は以下の記事をお読みください。
JavaScript 2. スライダーの設定
ここでは、実際のスライダーの設定をしていきます。
Swiperでは多くのオプションが用意されているので、以下のように指定します。
const verticalSlider = new Swiper(".vertical-slider", {
direction: "vertical", // スライダーの向きを縦にする
slidesPerView: 1, // 一度に1枚のスライドを表示
speed: 600, // 600msでスライドを切り替える
mousewheel: true, // マウスホイールやスクロールを有効にする
pagination: {
el: ".vertical-slider__pagination", // ページネーション要素のクラスを指定
type: "bullets", // ページネーションの形を指定
clickable: true, // ページネーションをクリック可能にする
},
});
ここでのポイントは、direction
に"vertical"
を指定することですね。
デフォルト値は"horizontal"
なので横方向にスライドするよう設定されていますが、向きを変えることで縦スライダーを実装することができます。
また、mousewheel
をtrue
にすることで、マウスホイールやトラックパッド等のスクロールにも反応するようになります。
ここでは最低限のオプションのみにしていますが、もっとカスタマイズしたい方はSwiper公式のAPIをチェックしてみてください。
これでJavaScriptの解説は終わりです!
【まとめ】Swiperで縦スライド可能な全画面ページを実装可能!
スライダーを実装できるJavaScriptライブラリ「Swiper」を使って、全画面の縦スライダーを実装する方法を紹介しました。
Swiperはよく横スライダーの実装に使われますが、少し工夫することで縦スライド可能の全画面ページを作ることができます。
フルスクリーンの縦スライドページを実装する機会があれば、是非この方法を使ってみてください!
コメント