2020/06/18 20:06

「One Page Scroll」で1ページずつスクロールするサイトを作る方法

けっこう古いですが、jQueryのプラグイン「One Page Scroll」の紹介です。

1ページずつふわっとスクロールするページも数年前はけっこう見かけてましたが、最近でももしかしたらカスタマイズによってはかっこいいんじゃないだろうか？

そんな期待を込めながらご紹介。

ちょっとしたLPなんかでも見せ方によっては使えるかなと思います。

One Page Scroll

ダウンロードとデモページは下記となります。

・One Page Scroll -GitHub

https://github.com/peachananr/onepage-scroll

・DEMOページ

http://peachananr.github.io/onepage-scroll/Demo/demo.html

ちょっとスクロールするだけで次の画面へとスルスルっと遷移してくれます。

使い方

・ファイル読込

「head」内にjQuery本体、スクリプトファイル、cssファイルを読み込みます。

【html】


<head>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script type="text/javascript" src="jquery.onepage-scroll.js"></script>
 <link href='onepage-scroll.css' rel='stylesheet' type='text/css'>
</head>

・記述

次に1画面ずつの割り方。

mainがコンテナ、section要素で各パネルを実装。

【html】


<body>
  <div class="main">
    <section>1画面目の記述</section>
    <section>2画面目の記述</section>
  </div>
</body>

・JavaScript

そしてスクリプトの実行です。

【javascript】


$(".main").onepage_scroll();

・オプション等

【javascript】

$(".main").onepage_scroll({ sectionContainer: "section", // セクション要素（変更可） easing: "ease", // イージングの種類"ease", "linear", "ease-in", "ease-out", "ease-in-out", "cubic-bezier(0.165, 0.8, 0.410, 1.200)" animationTime: 1000, // アニメーション時間 pagination: true, // ページネーションの有無 updateURL: false // スクロールした際にページURLを変更するかの有無 });