One Page Scrollのサンプルと設置方法

One Page Scrollのサンプルと設置方法
Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestEmail this to someone

いっときjQueryのPluginを使用して遊ぶのが楽しかったのですが、その中でもこちらのプラグインはおすすめなので、サンプルのご紹介と設置方法を記載したいと思います。

サンプルページはこちら

本家サイトはこちら(jQuery One Page Scroll by Pete R. | The Pete Design)

    ダウンロード方法

    本家サイト(jQuery One Page Scroll by Pete R. | The Pete Design)
    【Download on GitHub】をクリックして、GitHubのページを開きます。

    すると以下のような画面が出るので、Download ZIPをクリック。

    ダウンロード後にzipファイルを展開、以下2ファイルを任意の場所にアップロードします。

    ◆jquery.onepage-scroll.min.js
    ◆onepage-scroll.css

    head内で読み込む

    以下をheadタグ内に記述しましょう。

    <head>
    <!-- 先程アップしたファイル -->
    <link rel="stylesheet" href="★右記ファイルまでのパス★/onepage-scroll.css" />
    <!-- jQueryの読み込み※すでに読み込んでいる場合は重複するので読み込まないでOKです。 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- 先程アップしたファイル -->
    <script type="text/javascript" src="★右記ファイルまでのパス★/jquery.onepage-scroll.min.js"></script>
    <script>
    $(function(){
    $(".main").onepage_scroll({
    });
    });
    </script>
    </head>

    以上でとりあえず動くのですが、オプションとして以下の設定が可能です。

    ※上記コードの【9行目】〜【12行目】を以下に差し替えてみましょう。

    $(function(){
    $(".main").onepage_scroll({
    sectionContainer: "section", 
    // デフォルトではhtmlコードで<section>で括られた部分が1ページ対象ですが、
    // divなどに変更できます。その場合は"section"部分を"div"へ。
    easing: "ease",
    // スクロールする際のイージングを変更できます。
    // "ease"か "linear"か "ease-in"か "ease-out"か "ease-in-out"を記入したり。
    animationTime: 1000,
    // スクロールのアニメーションの時間。1000で1秒です。
    pagination: true, 
    // ページネーション(サンプルページでは右側の点 = ページ送り)の表示の有無。
    // trueかfalse。
    updateURL: false,
    // ページをスクロールした際にURLも変更するかどうか。true か false。
    loop: false, 
    // 最下のページをスクロールでトップページへループさせるかどうか。true か false。
    keyboard: true,
    // キーボード操作可能にするかどうか。(下矢印ボタンで次のページへ進むなど)。true か false。
    });
    });

     

    マークアップ

    bodyタグ内へ、以下のような形でマークアップしましょう。

    <body>
    <div class="main">
    <section>1ページ分の内容</section>
    <section>1ページ分の内容</section>
    <section>1ページ分の内容</section>
    </div>
    </body>

    以上となります!