ウェブ

セクションごとにスクロールさせる方法 – scrollfy.jsの使い方【jQuery】

scrollify.js

各セクションごとにスクロールさせる為には、jQueryを使用して動作させる必要があります。

そこで簡単に実装が可能なjQueryのプラグイン「scrollfy.js」の使い方について解説します。

sectionbackgroundをイメージ画像を指定することで画像にすることも可能。

【写真入りセクションごとにスライド】

▪実装例-CodePen⇩

See the Pen セクションごとにスクロールさせる.scrollify by pull-design (@design90806871) on CodePen.

scrollfy.jsの公式サイト

projects.lukehaas.me
SCROLLIFY

下の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.jsscrollify.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

指定する対象をsectionsectionごとにスクロールさせる事ができます。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。
scrollfyオプション

オプションを使ってアレンジ

ドット付き:セクションごとにスクロールさせる.scrollify

jsでulliを追加してドットをクリックしてページスクロールの実装例です。

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不要】

swiper
Swiperでスライドを簡単に実装する方法(スワイパー)【jQuery不要】スライダーはslickがありますがこちらはjQueryが必要になりますが、Swiperの場合はjQuery不要で利用可能です。外部プラグインもjQueryも使わずに、高機能スライダーとして様々なカスタム可能。...

▪Slick/全画面でふわっと切り替えスライドショー【ズーム機能を追加】

【ズーム機能を追加】Slick/全画面でふわっと切り替えスライドショー
【ズーム機能を追加】Slick/全画面でふわっと切り替えスライドショーズーム機能を追加したSlick/全画面でふわっと切り替えスライドショーをコピペで実装する...