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

2021.02.06

2022.04.02

セクションごとにスクロールできる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を読み込む方法は、

・jQuery公式サイトからダウンロードしてきて読み込む
・CDNを使って読み込む

の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

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

オプション名	説明
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の初期化後に発生するコールバック。