2018.7.31

画面毎のスクロール遷移ができるjQueryプラグイン「Scrollify」を使ってみた

どうも、kuroro0319です。
トップのメインビジュアル部分だけをスクロールジャックしたいという要望がたまにあったりします。
マウスホイールの操作とかはちょっとハードル高いな〜と思いつつ保留にしていましたが、
今回はそんな悩みを解決してくれるjQueryのプラグインを発見しました。

まずは公式サイトへ！

とりあえず、何はともあれ実際のものを見てみないとわからないと思いますので、まずはScrollifyの公式サイトへGO。
このサイト自体がプラグインのDemo画面になっているので、どのようなものか想像がしやすいと思います。次にGithubのプロジェクト画面で、ソースをダウンロードします。
そして、実装したいhtmlにjsファイルを埋め込みます。

後は以下の公式サイトに書いてある通りに実装すれば大丈夫です。

早速実装してみましょう！

取り急ぎ、実装をしたいだけなら、scrollify関数を実行して、画面毎移動させたい要素と紐づけるだけで大丈夫です。
公式サイトの抜粋ですが、以下のみでもとりあえず動きます。
jQueryのバージョンは3.2.1でも動きました。

<script>
    $(function() {
      $.scrollify({
        section : ".example-classname",
      });
    });
  </script>

  <div class="example-classname"></div>
  <div class="example-classname"></div>

使ってみての感想

非常に簡単に手間なく実装できるので、非常に素晴らしいですね。
ただ、Macのマジックマウスで素早くスクロールするとたまにバグることがありました。
それから、若干アンカーのスムーススクロールとちょっと相性悪いみたいです。
hashの書き換えをなしの設定にすると、画面が動かなくなったりなど、かなりバグってしまったので注意が必要です。
もう少し使ってみたり、公式サイトを読んでいったら解決するかもしれませんが…