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

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を変更するかの有無

});

 

 

まとめ

 

jQueryと2つのファイルを突っ込んで読み込ませるだけで、けっこう簡単に実装できるのでオススメです。

 

後は各セクション毎にアニメーションを入れて表示のさせ方を工夫するといいかと思います。

例えばグリッチみたいなエフェクトがかかりながら表示が出現するとか。

 

 

現場から以上です!

 

7366

PICK UP