【jQuery】Scrollifyの使い方【スクロールエフェクトを付ける方法】初心者向き

2020年9月29日2021年5月18日

jQueryプラグインの1つ「Scrollify」の使い方を、初心者にも分かりやすく紹介していきます。

Contents

1. jQueryプラグイン「Scrollify」で出来ること
2. Scrollifyを設置する方法
3. Scrollifyの書き方
4. 応用：Scrollify×animate.cssで豪華エフェクトに
5. Scrollifyについてまとめ＆おまけ

jQueryプラグイン「Scrollify」で出来ること

ScrollifyとはjQueryプラグインの1つです。

Scrollifyを使うと、各セクション毎にスムーズにスクロール出来るようになります。

従来のサイトではスクロールした分だけページが動きますが、Scrollifyはスライドを見ている様な感覚で1ページずつ表示されます。

Scrollifyを導入したサイトをスクロールすると、丁度良い位置に自動で止まるので、見ている人に新鮮さを与えることができます。

デモサイト

また、コンテンツの長さがページビューの高さを超える場合、ページ内でスクロール出来るようになるのもScrollifyの特徴です。

See the Pen Donuts Shop with Scrollify (jQuery) by Yuhomyan (@yuhomyan) on CodePen.

Scrollifyを設置する方法

Scrollifyを設置する方法には、

コードをダウンロードしてパスを書く方法
CDNを使う方法

この2種類があります。

また、どちらの方法でもjQueryも一緒に設置する必要があります。公式によるとjQuery 1.7+以上が必要です（jQueryを初めて使う人は、最新のものを使えば大丈夫です）。

CDNを使う方法

CDNとは「Content Delivery Network」の略で、インターネットを利用した配信ネットワークのことです。

<head></head>内に以下のコードを書きます。

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

コードをダウンロードしてパスを書く方法

jQueryとScrollifyをそれぞれダウンロードし、同じディレクトリ内に保存します。

<head></head>内に以下のコードを書きます。

<script src="jqueryまでのフォルダ内のパス"></script>
<script src="scrollifyまでのフォルダ内のパス"></script>

ただ、こちらの方法はダウンロードなどの手間がかかるので、CDNを使う方法がおすすめです。

Scrollifyの書き方

基本の記述

基本の記述の方法です。これさえ分かれば、あとはCSSやアニメーションの指定など細かい部分を足していくだけです。

○JavaScript

$(function() {
    $.scrollify({
      section : "適応したい要素名(この場合はsection)",
    });
  });

○HTML

<body>
  <section>Seciton 1</section>
  <section>Section 2</section>
  <section>Section 3</section>
</body>

<section>を使用しましたが、<div>を使ったり、クラスを付けることも可能です。その場合はこんな感じになります。ただ、スクロールの対象は同じ要素名またはクラス名を使います。

○HTML

<body>
 <div class="example-classname">1</div>
 <div class="example-classname">2</div>
 <div class="example-classname">3</div>
</body>

○JavaScript

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

これだけでも動きますが、背景の切り替えが分かりやすいようにCSSを追加します。

section{
  background: #2cc3ce;
  padding: 40px;
  color: #fff;
  font-size: 20px;
}
section:nth-child(2){
  background: #f73656;
}

完成イメージはこんな感じです。

See the Pen Scrollify demo -easy version by Yuhomyan (@yuhomyan) on CodePen.

アニメーションエフェクトや速度を指定することができます。こちらは設定出来る項目と記述の例です。

//Configuration

$(function() {
    $.scrollify({
    section : "section",
    sectionName : "section-name",
    interstitialSection : "",
    easing: "swing",
    scrollSpeed: 1000,
    offset : 0,
    scrollbars: true,
    standardScrollElements: "",
    setHeights: true,
    overflowScroll: true,
    updateHash: true,
    touchScroll:true,
    before:function() {},
    after:function() {},
    afterResize:function() {},
    afterRender:function() {}
  });
  });

応用：Scrollify×animate.cssで豪華エフェクトに

Scrollifyと一緒にanimate.cssを使うと、要素に様々なエフェクトをかけられるようになります。

こちらもCDNを使って読み込むことが可能です。

animate.cssのデモサイト

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">

こちらのCodePenはScrollifyと、animate.cssを使って作りました。

上下から文字や画像が出てくるエフェクトはanimate.cssによるものです。

See the Pen Traditional Asian like -中華風 by Yuhomyan (@yuhomyan) on CodePen.

Scrollifyについてまとめ＆おまけ

Scrollifyとはスムーズなページスクロールに便利なJavaScriptプラグインです。

CDNで読み込み、数行の　JavaScriptを書くだけなので比較的かんたんに使えます。

Scrollifyを使うとWebページを各セクション毎にスムーズにスクロール出来るようになるので重宝します。

Webサイトに面白いアクセントが加わるので、ぜひやってみてください。

それでは良いディベロッパーライフを！

WordPressのカスタマイズに役立った書籍まとめ

この記事では、WordPressのカスタマイズをしていく中で役に立った書籍を紹介していきたいと思います。 ...

https://yuhostyles.com/wp-customize-book/

JavaScript コードレシピ集

池田泰延・鹿野壮

技術評論社 (2019/1/25)

Amazon

jQuery

Posted by Yuhostyles