jQuery Scrollify の使い方、困ったこと＆解決方法をご紹介します。

背景

• GitHub: lukehaas/Scrollify: A jQuery plugin that assists scrolling and snaps to sections.
• デモサイト: jQuery Scrollify Demo

参考になった jQuery Scrollify の使い方記事

• スクロールをセクションごとに制御するプラグイン「jQuery Scrollify」を詳しく解説！ – WEBDESIGNDAY
• 簡単に画面いっぱいの縦スクロールページが作れるScrollifyの使い方 | 東京のWeb制作会社LIG

jQuery Scrollify で困ったこと

jQuery Scrollify の体系的な使い方は上記の参考記事で詳しく説明されているので、本記事では使ってみて困ったこと & その解決方法をご紹介します。

First Paint で表示が崩れる

• https://cdnjs.com/libraries/jquery
• https://cdnjs.com/libraries/scrollify

? First Paint で表示が崩れるケース

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>
</body>

? First Paint で表示が崩れ無いケース

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>
</head>

以上、jQuery Scrollify を使いこなしていきたい、現場からお送りしました。