各セクションごとにスクロールさせる為には、jQueryを使用して動作させる必要があります。
そこで簡単に実装が可能なjQueryのプラグイン「scrollfy.js」の使い方について解説します。
sectionのbackgroundをイメージ画像を指定することで画像にすることも可能。
【写真入りセクションごとにスライド】
▪実装例-CodePen⇩
See the Pen セクションごとにスクロールさせる.scrollify by pull-design (@design90806871) on CodePen.
scrollfy.jsの公式サイト

下のURLがscrollfy.jsのサイト情報になり、実装はCDNで読み込むかダウンロードする必要があります。
▪公式サイト :https://projects.lukehaas.me/scrollify/#home
▪CDN版 :https://cdnjs.com/libraries/scrollify
▪GitHubダウンロード版 :https://github.com/lukehaas/Scrollify
CDNでScrollify.jsの読み込み
jquery.min.jsとscrollify.min.jsを</body>の直上に記述して読み込みます。
※jqueryを読み込んで次にscrollifyを読み込む書き方をしないと動作しません。
<!-- jquery.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- scrollify.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.21/jquery.scrollify.min.js"></script>
code記述方法
HTML
sectionを三つ作ると三つのスクロールが可能になります。
<section>
<p>Section1</p>
</section>
<section>
<p>Section2</p>
</section>
<section>
<p>Section3</p>
</section>
CSS
sectionの背景色を指定すると動作がわかりやすいです。
/* 背景色 */
section {
background: #6495ed;
}
section:nth-child(2) {
background: #00fa9a;
}
section:nth-child(3) {
background: #f4a460;
}
JS
指定する対象をsectionでsectionごとにスクロールさせる事ができます。section:”.クラス名”,の記述でクラスの指定も可能です。
$(function() {
$.scrollify({
section : "section", //指定する対象
easing : 'swing', // イージング指定
scrollSpeed : 300, // スクロールの速度
});
});
scrollfy.jsのオプション一覧
scrollfy.jsではオプションが用意されていて、$.scrollify({ });の中に記述することで使用可能になります。
オプション | 内容 |
---|---|
section : “section”, | ページスクロールをさせたいエリアのidやclassを指定。 |
sectionName : “section_name”, | 各セクションに付けるデータ属性の名前の変更。デフォルトは「sectionName」。 |
interstitialSection : “header”, | ヘッダーやフッターなど1ページスクロールさせずに表示するidやclassを指定。 |
easing : “swing”, | イージングlinearなど指定可能(https://easings.net/ja)を参照。 |
offset : 0, | スクロール先の位置を指定。600だと600px下にスクロールされる。 |
scrollSpeed : 600, | スクロールの速度をミリ秒で設定。 |
scrollbars : true, | スクロール表示・非表示設定。falseで非表示。 |
standardScrollElements : “main”, | 標準のスクロール動作を必要とするエリアのidかclassを指定。 |
setHeights : true, | heightをブラウザ全体に表示させるかを設定。デフォルトはtrue。非表示はfalse。 |
overflowScroll : true, | スクロールさせるかどうかを設定。デフォルトはtrue。falseにすると、はみ出した要素は無視されて次のセクションまでスクロールされる。 |
updateHash : true, | セクションをスクロールする時にscrollifyがブラウザの#を更新するかどうか指定。デフォルトはtrue。falseにするとURLの末尾に#が付かなくなる。 |
touchScroll : true, | タッチスクロールを処理するかどうかを設定。デフォルトはtrue。 |
オプションを使ってアレンジ
ドット付き:セクションごとにスクロールさせる.scrollify
jsでulとliを追加してドットをクリックしてページスクロールの実装例です。
See the Pen ドット付き:セクションごとにスクロールさせる.scrollify by pull-design (@design90806871) on CodePen.
Swiperとドット付き:セクションごとにスクロールさせる.scrollify
高機能スライダーのSwiperとscrollifyを組み合わせて使う方法の実装例です。
See the Pen Untitled by pull-design (@design90806871) on CodePen.
他の動的プラグイン
JavaScriptに抵抗があり、簡単に動きを追加したい場合は無料で提供されているプラグインを導入して実装することをオススメします。
▪Swiperでスライドを簡単に実装する方法(スワイパー)【jQuery不要】
▪Slick/全画面でふわっと切り替えスライドショー【ズーム機能を追加】