URLをコピーしました!
スキルアップを始める!

【WordPress】「scrollfy.js」スクロールすると1画面移動するアニメーションを作成する

WordPress(ワードプレス)
\ワードプレスのスキルアップはこちら!/ WordPress入門読本

クロールすると1画面移動するアニメーションを作成したいと思った時に、便利なjQueryライブラリが「scrollfy.js」です。

デモページはこちら▼

https://eguweb.net/?p=1613

scrollfy.jsとは?

JavaScript Developerの@lukehaasさんが作成したスクロールライブラリです。スクロールパララックスアニメーションが実装できるようになるためのライブラリです。

詳しい情報は公式サイトに書かれてあります▼

jQuery Scrollify - Power steering for your scroll wheel
A jQuery plugin that assists scrolling and smoothly snaps to sections.

こんなものが作れるとは、すごすぎる…。

scrollfy.jsの使い方

まずは、CDNでjQueryとscrollfy.jsをインポートします。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.21/jquery.scrollify.min.js" integrity="sha512-UyX8JsMsNRW1cYl8BoxpcamonpwU2y7mSTsN0Z52plp7oKo1u92Xqfpv6lOlTyH3yiMXK+gU1jw0DVCsPTfKew==" crossorigin="anonymous"></script>

これで準備は完了です。

Basic Setup

公式の手順そのままですが、下記のように設定していきます。まずは基本構造です。シンプルにjQueryを組み込んでいます。

<! doctype html>
  <html>
    <head>
      <script>
        $(function() {
          $.scrollify({
            section : ".example-classname",
          });
        });
      </script>
    </head>
    <body>
      <div class="example-classname"></div>
      <div class="example-classname"></div>
    </body>
  </html>

Configuration

セクション名やスクロールスピード、タッチの際にスクロールするか(?おそらく)、などを設定できるようになっています。

[rml_read_more]

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

Configuration

sectionName
Scrollifyを使用すると、各セクションのハッシュ値を定義できます。これにより、特定のセクションへのパーマリンクが可能になります。これは、セクションのデータ属性として設定されます。データ属性の名前は「sectionName」で定義されます。

interstitialSection
ヘッダーやフッターなど、フルハイト以外のセクション用のCSSセレクター。

easing
イージング方法を定義します。

offset
各セクションの位置をオフセットするためのピクセル単位の距離。

scrollbars
スクロールバーを表示するかどうかを定義するブール値。

setHeights
Scollifyがセクションに高さを割り当てるかどうかを定義するブール値。デフォルトではTrue。

standardScrollElements
標準のスクロール動作を必要とするセクション内の要素のCSSセレクター。

overflowScroll
Scrollifyがセクション内のオーバーフローしたコンテンツをスクロールできるかどうかを定義するブール値。デフォルトではTrue。

updateHash
セクションをスクロールするときにScrollifyがブラウザの場所のハッシュを更新するかどうかを定義するブール値。デフォルトではTrue。

touchScroll
Scrollifyがタッチスクロールイベントを処理するかどうかを定義するブール値。デフォルトではTrue。

before
セクションがmoveメソッドを介してスクロールされる前に発生するコールバック。引数には、セクションのインデックスとすべてのセクション要素の配列が含まれます。

after
新しいセクションがスクロールされた後に発生するコールバック。引数には、セクションのインデックスとすべてのセクション要素の配列が含まれます。

afterResize
ウィンドウのサイズが変更された後に発生するコールバック。

afterRender
Scrollifyの初期化後に発生するコールバック。

Methods

下記のメソッドを使うことで、スクロールに様々な仕掛けを入れることができます。

$.scrollify.move("#name");

moveメソッドを使用して、特定のセクションにスクロールできます。これは、セクションのインデックス、またはハッシュが前に付いたセクションの名前を取ることができます。

$.scrollify.instantMove("#name");

InstantMoveメソッドを使用すると、アニメーションなしで特定のセクションにスクロールできます。セクションのインデックス、またはハッシュが前に付いたセクションの名前を解析できます。

$.scrollify.next();

次の方法を使用して、現在のパネルの直後に続くパネルにスクロールできます。

$.scrollify.previous();

前の方法を使用して、現在のパネルの直前のパネルにスクロールできます。

$.scrollify.instantNext();

InstantNextメソッドを使用すると、アニメーションなしで、現在のパネルの直後にあるパネルにスクロールできます。

$.scrollify.instantPrevious();

InstantPreviousメソッドを使用して、現在のパネルの直前のパネルにスクロールできます。

Methods Continued

さらに、色々とメソッドが用意されています。

$.scrollify.destroy();

destroyメソッドは、すべてのScrollifyイベントを削除し、パネルから設定された高さを削除します。

$.scrollify.update();

updateメソッドは、パネルの高さと位置を再計算します。

$.scrollify.current();

currentメソッドは、現在のセクションをjQueryオブジェクトとして返します。

$.scrollify.disable();

disableメソッドは、ページが通常のようにスクロールするように、スクロールスナップの動作をオフにします。

$.scrollify.enable();

enableメソッドは、disableメソッドが使用された後、スクロールスナップ動作を再開します。

$.scrollify.isDisabled();

isDisabledメソッドは、Scrollifyが現在無効になっている場合はtrueを返し、そうでない場合はfalseを返します。

$.scrollify.setOptions()

setOptionsメソッドを使用して、任意の初期化オプションを変更できます。オプションオブジェクトを解析するだけです。

作成したデモページ

デモページはこちら▼

https://eguweb.net/?p=1613

まとめ

scrollfy.jsライブラリを使うと、文字通りスクロールアニメーションを作ることができます。もしご興味がありましたら、ご参考ください😃

Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら