[Shopify]Scrollifyを使用して、フルスライドのページを作成する方法

なんかワンスクロールで、さっと画面が遷移するフルページのShopifyサイト作りたいな。前よく使われてたfullPage.jsは有料になっちゃったから、無料のScrollifyを使って実装してみよう！

DEMO（EC Penguinサイトで作成したPages）はこんな感じ

https://ec-penguin.myshopify.com/pages/scrollify-demo-page

Shopify内にちょっとお洒落なLPとか作りたい時は重宝するScrollify。

さっと画面が切り替わるサイトはスマートでカッコ良いです。そんなScrollifyでのフルページの実装方法を解説していきます。

ただ使用しているアプリやサイト自体の設計によっては上手く動かない場合もありますので、まずざっくり入れてみて、各ブラウザで入念にチェックすることをお勧めします！（作り込んでテストしてダメだったら時間がもったいないので！）

jQueryとScrollifyをtheme.liquidに入れる

まずこの二つをtheme.liquidで読み込みます。

jQueryを読み込む

Google Hosted Libraries から

https://developers.google.com/speed/libraries

jQueryの部分にあるこちらのコードをtheme.liquidファイルに追加します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Scrollifyを読み込む

ScrollifyはこちらのGithubからダウンロード。

https://github.com/lukehaas/Scrollify

右のDownload ZIPからダウンロードします。

その中のjquery.scrollify.jsファイルをassetフォルダに追加しましょう。（それ以外は使いません。消去でOKです。）追加したら、theme.liquidで読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
{{ 'jquery.scrollify.js' | asset_url | script_tag}}

こんな感じですね。必ずjqueryの後に、scrollifyのファイルを読み込むようにしましょう。

これで読み込みが完了しました！

pagesで検証環境を作成する

次に検証用の環境を作ってみましょう。

新しくpage.scrollify.liquidファイルを作成し、templatesフォルダーに追加します。

次にShopifyの管理画面から新規ページを作成します。

右上のページを追加をクリックし、下記の『テンプレート』部分を先ほど作成したpage.scrollifyにしましょう。

これで検証環境の作成が完成しました！

page.scrollify.liquidの中身

それでは、次に検証環境に適用させるコードです。

これをコピペでOKです。

<div class="scrollify-section section01">
    <h2>section1</h2>
</div>
<div class="scrollify-section section02">
    <h2>section2</h2>
</div>
<div class="scrollify-section section03">
    <h2>section3</h2>
</div>

<style>

    body#exhibition{
        padding-top: 0!important;
    }

    div#shopify-section-footer{
        display: none;
    }

    div#shopify-section-header{
        display: none;
    }

    #MainContent{
        padding-top: 0;
    }

    .scrollify-section{
        height: 100vh;
        width: 100%;
    }

    .section01{
        background: pink;
    }
    .section02{
        background: lightblue;
    }
    .section03{
        background: bisque;
    }

</style>

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

これで保存して、先ほど作成したページを表示してみてください。

Scrollifyが実装されて、自分のサイトで検証できるはずです。

Scrollifyの設定一覧

ちなみに、Scrollifyはこのように色々な設定を行うことができます。

$.scrollify({
    section : ".example-classname",
    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() {}
  });

フルページからHeader, Footerを除外する

その中でも最も使うのが、Header, Footerをフルページから除外するものでしょう。

例えば、上記のScrollifyのjQuery部分に interstitialSectionを加えると、ある部分をフルページではない扱いにしてくれます。（これめちゃくちゃ便利です。）

今回は、ヘッダー部分に”shopify-header”、フッター部分に”shopify-footer”というクラスをフッターにつけ、部分的にScrollifyのフルページ表示から除外しています。

$.scrollify({
    section:".scrollify-section",
    interstitialSection : ".shopify-header, .shopify-footer"
});

レスポンシブでScrollifyを無効にする

ちなみに公式では、

$.scrollify.disable()

と記載すると、Scrollifyを無効化できますよ。と記載されていたので、window幅が一定以下になったら、上記の関数適用するように書いたのですが、、

全く無効化してくれない。。

なので、試行錯誤して、そもそも存在しないクラスにScrollify適用されれば良いのでは？と思い試してみたら行けました！

windowWidthでwindow幅を取得し、幅が768px以上なら適切なクラスに適用。幅が767px以下なら適当な存在しないクラスに適用。

$(function () {
    var windowWidth = $(window).width();
    if(windowWidth > 768){
        $.scrollify({
            section:".exhibition-scrollify",
            interstitialSection : ".exhibition-header, .exhibition-footer"
        });
    } else{
        $.scrollify({
            section:".not-existing-class"
        });
    }
});

こんな感じでレスポンシブ対応できました。

ちなみにCSSのスクロールスナップとか使用していると、Scrollifyうまくモバイルで無効化できないので、お気をつけください。

ShopifyでScrollifyを使用する方法 まとめ

以上ScrollifyをShopifyで使用する方法でした！

普通の商品ページなどでScrollifyを使用するのは難しいかも知れませんが、キャンペーンページや会社概要ページ、コレクションページには使えそうです。

ただ冒頭に述べたとおり

ただ使用しているアプリやサイト自体の設計によっては上手く動かない場合もあります

 

ので、複数環境でテストするのをお忘れなく！