お問い合わせ
    氏名

    メールアドレス

    件名

    お問い合わせ内容



    会員登録(無料)
    ログイン
    スキルアップは今すぐこちら!▶

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

    WordPress(ワードプレス)
    この記事は約7分で読めます。

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

    デモページはこちら▼

    Scrollify.js
    SECTION01 SECTION02 SECTION03 SECTION04 /* scrollify.jsに関係する記述はここかから */.scrollify{ wi

    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

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

    $.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メソッドを使用して、任意の初期化オプションを変更できます。オプションオブジェクトを解析するだけです。

    作成したデモページ

    デモページはこちら▼

    Scrollify.js
    SECTION01 SECTION02 SECTION03 SECTION04 /* scrollify.jsに関係する記述はここかから */.scrollify{ wi

    まとめ

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

    0 件のコメント

    コメント
    タイトルとURLをコピーしました