こんばんわ。たいそん(@ttaison)です。
さて、今回記事にするのはサイトのとあるデザイン表現について。
これは数年前からある手法なんですが、皆さんちょこちょこ見かけませんか？
画面いっぱいに一つのコンテンツが表示されてスクロールすると画面単位で移動するwebサイト。
フツウに実装しようとするとcssやらなんやら駆使して
なかなか手間のかかるデザイン表現ですが、
実はとてもカンタンに実装することができるんですよ。
それがこちら！
読み込むだけで全画面スクロール！fullPage.js
とりあえず公式サイトのデモを見るのがわかりやすいのでリンク貼っておきます。
公式のデモページ
こんなデモ画面みたいな画面がとんでもなくカンタンに作れちゃうのが
fullPage.jsのいいトコロ。
さっそく使い方を見ていきましょう。
fullPage.jsで画面いっぱいのスクロールページを作る方法
まずは公式のgithubより必要データをダウンロードします。
公式のgitHub
※そのほかjQueryも忘れず読み込んでね！
次にhtmlをマークアップしていきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>フルページ</title>
<link href="reset.css" rel="stylesheet">
<link rel="stylesheet" href="fullpage.min.css">
<style>
.section{ background-color: #DCDEE1; }
.section:nth-child(2){ background-color: #D7B398; }
.section:nth-child(3){ background-color: #E2D0C3; }
.section:nth-child(4){ background-color: #ECE2D7; }
.section{
color: #453F4A;
font-size: 3.2rem;
text-align: center;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/easings.min.js"></script>
<script src="js/scrolloverflow.min.js"></script>
<script src="js/fullpage.min.js"></script>
</body>
</html>ひとまず動作をさせたいので、上記のbodyのすぐ上に下記を記述し、fullPage.jsを最小限で起動させます。
<script>
$(function(){
$('#fullpage').fullpage();
});
</script>
さあ、どうですか？できました？
たったこれだけで全画面スクロールのページが実装できちゃいます。とってもカンタンですね。
さらにこれだけではなく、fullPage.jsにはさまざまな便利機能がオプションとして備え付けられており、わずかなコード入力で多彩な表現ができるスグレモノ。
気になる方はゼヒ公式サイトのオプションを見てみてください。
まとめ
皆さん、希望するフルスクリーンのページが作成できたでしょうか？
これだけ時短できるプラグインが揃っていると、
まだまだjQueryも捨てたもんじゃありませんね。
ちなみにWordpressのテーマ、プラグインとしても提供されているそうで。
WordPressを使用した案件でも
同様のデザインがカンタンに実装できるのはありがたいですね。
それでは、また！
