Home
CSS
セクションごとにスクロールできるjQueryプラグインのScrollify.jsを解説

セクションごとにスクロールできるjQueryプラグインのScrollify.jsを解説

セクションごとにスクロールできるjQueryプラグインのScrollify.jsを解説

どうも!かけちまるです!
あぁ〜セクションごとにスクロールするアニメーション作りたいなぁ
誰もが一度はそう思うことでしょう。思うのです。
それを今回はjQueryのプラグインである「Scrollify.js」を使って実現させたいと思います。

はじめに「Scrollify.js」の情報を載せておきますね。

公式サイト : https://projects.lukehaas.me/scrollify/

GitHub : https://github.com/lukehaas/Scrollify

Scrollify CDN : https://cdnjs.com/libraries/scrollify

あとこんな感じな動きができます。

See the Pen Scrollify.js How to use03 by kakeru yago (@kakechimaru) on CodePen.

では、やっていきましょう!

jQueryの読み込み

まず最初にjQueryを読み込んでいきましょう。
「そのくらい分かるわwww」という方は飛ばしてください。

jQueryを読み込む方法は、

の2つあります。

今回はCDNを使って読み込みます。

以下のソースコードをheadタグ内にコピペでOK!

HTML
コピー
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Scrollify.jsの読み込み

次にScrollify.jsを読み込んでいきましょう!

Scrollify.jsを読み込む方法も2つで、

  • GitHubからソースをダウンロードしてきて読み込む
  • CDNを使って読み込む

の2つあります。

こちらもCDNを使って読み込みます。

これをheadタグ内のjQueryより下にコピペでOK!

HTML
コピー
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.21/jquery.scrollify.min.js" integrity="sha512-UyX8JsMsNRW1cYl8BoxpcamonpwU2y7mSTsN0Z52plp7oKo1u92Xqfpv6lOlTyH3yiMXK+gU1jw0DVCsPTfKew==" crossorigin="anonymous"></script>

基本的な使い方

HTML

HTML
コピー
<div class="container"> <section class="section01 scrollify"> <div class="title">SECTION01</div> <div class="content">Once upon a time,<br>Cinderella had a step-mother and two step-sisters move into her house.<br>Each of them was cruel, and every day they did mean things to Cinderella.<br><br>One day, an invitation to a ball was delivered.<br>“You have to stay home!”<br>said her step-mother and step-sisters as they left.<br><br>As Cinderella was left crying, her Fairy Godmother appeared<br>and said, “I am going to help you.”<br>With a sparkle of her magic wand<br><br>a beautiful dress and a pumpkin carriage appeared!<br>“This magic will only last until midnight,” said the Fairy Godmother,<br><br>lastly giving her a pair of glass slippers.<br><br>When Cinderella arrived at the castle,<br>a handsome prince came up to her<br>and asked, “May I have this dance?”<br>The two of them were getting along wonderfully,<br><br>when “Bong!”<br>The clock struck midnight!<br><br>Cinderella rushed away to get home,<br>but lost one of her glass slippers on the stairs.<br><br>The next day, a servant from the castle came to the house.<br>“The Prince will marry whoever owns this glass slipper.”<br><br>“It’s mine! It’s mine!”<br>lied the two step-sisters.<br>But their feet were too big to fit!<br><br>Cinderella, of course, was a perfect fit.<br><br>Cinderella married the Prince<br>and they had a wonderful life together,<br>living happily ever after. </div> </section> <section class="section02 scrollify"> <div class="title">SECTION02</div> </section> <section class="section03 scrollify"> <div class="title">SECTION03</div> </section> <section class="section04 scrollify"> <div class="title">SECTION04</div> </section> </div>

CSS

CSS
コピー
/* scrollify.jsに関係する記述はここかから */ .scrollify{ width: 100%; height: 100vh; } .section01{ background-color: #ff7575; } .section02{ background-color: #75ff75; } .section03{ background-color: #ffff75; } .section04{ background-color: #75baff; } /* scrollify.jsに関係する記述はここまで */ /* セクションごとのタイトルはここから */ .title{ font-size: 36px; font-family: 'Oswald', sans-serif; letter-spacing: 0.1rem; margin-left: auto; margin-right: auto; padding-top: 70px; width: fit-content; width: -moz-fit-content; width: -webkit-fit-content; } .content{ font-size: 16px; font-family: 'Oswald', sans-serif; margin-left: auto; margin-right: auto; margin-top: 30px; line-height: 1.5; padding-bottom: 50px; text-align: justify; width: fit-content; } /* セクションごとのタイトルはここまで */

jQuery

JavaScript
コピー
$.scrollify({ section:'.scrollify', //対象要素を指定 easing: 'swing', // イージングを指定 scrollSpeed: 600, // スクロール時の速度 updateHash: false, // スクロール時アドレスバーのURLを更新 });

基本的なコードは以上です。
これで以下のような挙動になると思いますよ。

See the Pen Scrollify.js How to use01 by kakeru yago (@kakechimaru) on CodePen.

オプションの説明

ここで一旦オプションの説明します。
よくわからんのもありますがGoogle翻訳に翻訳してもらったのを載せていきます。

一部分だけScrollifyを適応させたりページネーションを付けたりしたい人は、

  • ・standardScrollElements
  • ・afterRender
  • ・before

この3つオプションだけ理解すればいいかと思います。

オプション名 説明
section セクションのCSSセレクター
sectionName 各セクションのハッシュ値を定義できます。
これにより、特定のセクションにパーマリンクすることが可能になります。
これは、セクションのデータ属性として設定されます。
データ属性の名前は「sectionName」で定義されます。
interstitialSection ヘッダーやフッターなど、フルハイト以外のセクション用のCSSセレクター。
easing イージング方法を定義します。
offset 各セクションの位置をオフセットするピクセル単位の距離。
scrollbars スクロールバーを表示するかどうか。
standardScrollElements 標準のスクロール動作を必要とするセクション内の要素のCSSセレクター。
setHeights セクションに高さを割り当てるかどうかを定義する。
デフォルトではTrue。
overflowScroll セクション内のオーバーフローしたコンテンツをスクロールできるかどうかを定義するブール値。
デフォルトではTrue。
updateHash スクロール時アドレスバーのURLを更新するかどうか。
デフォルトではTrue。
touchScroll タッチスクロールイベントを処理するかどうかを定義する。
デフォルトではTrue。
before セクションがmoveメソッドを介してスクロールされる前に発生するコールバック。
引数には、セクションのインデックスとすべてのセクション要素の配列が含まれます。
after 新しいセクションがスクロールされた後に発生するコールバック。
引数には、セクションのインデックスとすべてのセクション要素の配列が含まれます。
afterResize ウィンドウのサイズが変更された後に発生するコールバック。
afterRender Scrollifyの初期化後に発生するコールバック。

一部分だけScrollifyを適応する方法

実際使う時って途中から普通にスクロールしたいことが多いのではと思うので、ここでは、途中から普通にスクロールできるようにします。
オプションを一つ加えることで実現できるのでよかったら試してみてください!

See the Pen Scrollify.js How to use02 by kakeru yago (@kakechimaru) on CodePen.

基本的な使い方から変更したソースコードは、
JSの6行目に通常スクロールする要素を追記しています。
HTMLとCSSはソースコードの編集はしていません。

ページネーションをつける方法

最後にページネーションをつける方法を解説します。
これも実際使う時によく実装したいところだと思います。
これをつければユーザーが現在サイトのどの辺にいるのかが分かりますね。

解説はコードに書いておきました。

See the Pen Scrollify.js How to use03 by kakeru yago (@kakechimaru) on CodePen.

基本的な使い方からHTMLは変更せずで、
CSSにページネーション用のCSSを追記しています。
JSにはページネーション用HTMLの生成とスクロール時の処理を追記しています。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【手動】Local by Flywheelで本番環境のWordPressをローカルに複製する

【手動】Local by Flywheelで本番環境のWordPressをローカルに複製する

【Three.js】スクロールにあわせてメッシュを動かす方法

【Three.js】スクロールにあわせてメッシュを動かす方法

【videoタグ】HTMLでWebサイトに動画を埋め込む

【videoタグ】HTMLでWebサイトに動画を埋め込む

floatで失った要素の高さを取り戻す2つの方法

floatで失った要素の高さを取り戻す2つの方法

【Contact Form 7 Multi-Step Forms】Contact Form7に入力確認画面を追加する方法

【Contact Form 7 Multi-Step Forms】Contact Form7に入力確認画面を追加する方法

videoタグの再生や停止などをJSでコントロールする方法

videoタグの再生や停止などをJSでコントロールする方法