jQuery Scrollify の使い方・困ったこと&解決方法
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 で表示が崩れる
👎 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 を使いこなしていきたい、現場からお送りしました。