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

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

Scrollifyで出来ること

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

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

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

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

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

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

設置する方法

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() {}
  });
  });

応用:animate.cssと一緒に豪華エフェクトに

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.

最後に

以上!

便利なJavaScriptプラグイン、Scrollifyについてでした!

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

スポンサーリンク

jQuery

Posted by Yuhostyles