jQuery

jQueryプラグイン「One Page Scroll」を利用し１ページ毎にスクロールする画面を実装する方法

2023年10月7日 by single コメントはまだありません

jQueryプラグイン「One Page Scroll」を利用し１ページ毎にスクロールする画面を実装する方法

jQueryプラグイン「One Page Scroll」を利用する方法を紹介します。

導入方法

ダウンロード

まず、GitHubのページに行き、書庫ファイル一式ダウンロードしてください。

『Download ZIP』を選択して、書庫ファイルをダウンロードしてください。

書庫ファイルを展開すると以下のようなファイルが展開されます。

コーディング

jQueryライブラリ読み込み

まず、jQueryプラグインなのでjQueryのライブラリを読み込みます。

なお、

note: jQuery 1.9.0 or later is strongly recommended because using jQuery less than 1.8.3 and jquery.onepage-scroll.js together turns out to be a hash-based XSS vulnerabiliry.

とあるので、バージョン1.9以降のjQueryをよい込む必要があります。

Requirement
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>

JSファイルインクルード

次にダウンロードして展開したファイルに含まれている「jquery.onepage-scroll.js」または「jquery.onepage-scroll.min.js」を読み込んでください。

<script src="/assets/onepage-scroll-master/jquery.onepage-scroll.js"></script>

CSSファイルインクルード

最後にダウンロードして展開したファイルに含まれている「onepage-scroll.css」を読み込んでください。

<link rel="stylesheet" href="/assets/onepage-scroll-master/onepage-scroll.css">

HTMLマークアップ

まず、「One Page Scroll」を適用する領域を定義します。

<div class="main">
  ...
</div>

次に各ページ内容を定義していきます。

<div class="main">
  <section>1</section>
  <section>2</section>
  <section>3</section>
  <section>4</section>
</div>

One Page Scroll初期化

最後にOne Page Scrollを初期化してください。

<script>
  $(".main").onepage_scroll();
</script>

デモ

デモページ１

まず一番シンプルなデモです。

HTMLコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
   <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
   <script src="/assets/onepage-scroll-master/jquery.onepage-scroll.js"></script>
   <link rel="stylesheet" href="/assets/onepage-scroll-master/onepage-scroll.css">
  </head>
  <body>
    <h4>デモ１</h4>
    <div class="main">
      <section>1</section>
      <section>2</section>
      <section>3</section>
      <section>4</section>
    </div>
    <script>
      $(".main").onepage_scroll();
    </script>
  </body>
</html>

デモページ２

次に各ページに背景写真を設定し、写真が全画面表示させるページです。スクロールは縦方向です。

HTMLコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <link rel="stylesheet" href="/assets/onepage-scroll-master/onepage-scroll.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="/assets/onepage-scroll-master/jquery.onepage-scroll.js"></script>
    <style type="text/css">
     .main section .page_container {
       position: relative;
       top: 50%;
       margin: 0 auto 0;
       max-width: 950px;
       z-index: 3;
     }
     .main section .page_container span{
       font-size:96px;
       font-weight:bold;
     }
     .onepage-pagination li a.active:before {
         width: 10px;
         height: 10px;
         background: none;
         border: 4px solid white;
         margin-top: 0px;
         left: 12px;
     }
    .onepage-pagination li a:before {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        background: rgba(255,255,255,0.85);
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
    }
  </style>
  </head>
  <body>
    <div class="main">
      <section style=" background: #FFFFFF url(https://www.single-life.tokyo/wp-content/uploads/2021/03/DSC02040-scaled.jpg) no-repeat 50% 50%; ;color : #FFFFFF">
       <div class="page_container">
          <span>ようこそ</span>
       </div>
     </section>
      <section style=" background: #FFFFFF url(https://www.single-life.tokyo/wp-content/uploads/2021/03/DSC03429-scaled.jpg) no-repeat 50% 50%; ;color : #FFFFFF">
       <div class="page_container">
          <span>Welcome</span>
       </div>
     </section>

      <section style=" background: #FFFFFF url(https://www.single-life.tokyo/wp-content/uploads/2021/03/DSC03280-scaled.jpg) no-repeat 50% 50%; ;color : #FFFFFF">
       <div class="page_container">
          <span>accueillir</span>
       </div>
     </section>
      <section style=" background: #FFFFFF url(https://www.single-life.tokyo/wp-content/uploads/2021/03/DSC08966-scaled.jpg) no-repeat 50% 50%; ;color : #FFFFFF">
       <div class="page_container">
          <span>歡迎</span>
       </div>
     </section>
    </div>
    <script>
      $(".main").onepage_scroll({
         sectionContainer: "section", 
         easing: "linear",     
         animationTime: 1000,
         pagination: true, 
         updateURL: false, 
         beforeMove: function(index) {},
         afterMove: function(index) {}, 
         loop: false, 
         keyboard: true,
         responsiveFallback: false,
         direction: "vertical"
      });
    </script>
  </body>
</html>

One Page Scroll初期化時にオプションを指定することができます。

オプション「direction」に『vertical』と指定すると、縦にスクロールするページができます。

デモページ３

最後に各ページに背景写真を設定し、スクロールは横方向です。

HTMLコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <link rel="stylesheet" href="/assets/onepage-scroll-master/onepage-scroll.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="/assets/onepage-scroll-master/jquery.onepage-scroll.js"></script>
    <style type="text/css">
     .main section .page_container {
       position: relative;
       top: 50%;
       margin: 0 auto 0;
       max-width: 950px;
       z-index: 3;
     }
     .main section .page_container span{
       font-size:96px;
       font-weight:bold;
     }
     .onepage-pagination li a.active:before {
         width: 10px;
         height: 10px;
         background: none;
         border: 4px solid white;
         margin-top: 0px;
         left: 12px;
     }
    .onepage-pagination li a:before {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        background: rgba(255,255,255,0.85);
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
    }
  </style>
  </head>
  <body>
    <button type='button' style='position:absolute;top:20px;left:20px; z-index:999' onclick="goToPrev();">←前へ></button>
    <button type='button' style='position:absolute;top:20px;left:100px;z-index:999' onclick="goToNext();">次へ→></button>

    <div class="main">
      <section style=" background: #FFFFFF url(https://www.single-life.tokyo/wp-content/uploads/2021/03/DSC02040-scaled.jpg) no-repeat 50% 50%; ;color : #FFFFFF">
       <div class="page_container">
          <span>ようこそ</span>
       </div>
     </section>
      <section style=" background: #FFFFFF url(https://www.single-life.tokyo/wp-content/uploads/2021/03/DSC03429-scaled.jpg) no-repeat 50% 50%; ;color : #FFFFFF">
       <div class="page_container">
          <span>Welcome</span>
       </div>
     </section>

      <section style=" background: #FFFFFF url(https://www.single-life.tokyo/wp-content/uploads/2021/03/DSC03280-scaled.jpg) no-repeat 50% 50%; ;color : #FFFFFF">
       <div class="page_container">
          <span>accueillir</span>
       </div>
     </section>
      <section style=" background: #FFFFFF url(https://www.single-life.tokyo/wp-content/uploads/2021/03/DSC08966-scaled.jpg) no-repeat 50% 50%; ;color : #FFFFFF">
       <div class="page_container">
          <span>歡迎</span>
       </div>
     </section>
    </div>
    <script>
      $(".main").onepage_scroll({
         sectionContainer: "section", 
         easing: "ease-out",     
         animationTime: 5000,
         pagination: true, 
         updateURL: false, 
         beforeMove: function(index) {},
         afterMove: function(index) {}, 
         loop: true, 
         keyboard: true,
         responsiveFallback: false,
         direction: "horizontal"
      });
      function goToPrev() {
        $(".main").moveUp();
      }
      function goToNext() {
        $(".main").moveDown();
      }
    </script>
  </body>
</html>

オプション一覧

オプション

sectionContainer

各ページを「section」タグ以外で定義する場合にはこのオプションで対象オブジェクトのセレクタを指定できるオプションです。

easing

ページを切り替える際の効果アニメーションを定義できるオプションです。

指定できる文字列は以下になります。

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out

または、cubic bezier値を指定できます。

  • cubic-bezier(x1,y1,x2,y2)

animationTime

ページを切り替える際の切り替え時間を指定できるオプションです。単位はミリ秒です。

pagination

『true』を指定すると、ページネーションが表示されます。

updateURL

『true』を指定すると、スクロールして、ページを切り替えるたびにURLが動的に変わっていきます。

ブラウザのアドレスバーのURLが変わっていくことを確認してみてください。

beforeMove

ページが切り替わる前に呼び出されるコールバック関数を定義できるオプションです。

afterMove

ページが切り替わった後に呼び出されるコールバック関数を定義できるオプションです。

loop

『true』に設定すると、最後のページの次に先頭のページに戻る、または、先頭のページから前のページに戻ると最後のページに移動します。

keyboard

『true』に設定すると、キーボード操作で、ページを移動させたりすることができます。

responsiveFallback

ピクセル単位で幅を指定すると、ブラウザの表示がその幅を下回るとレスポンシブ表示が無効になります。例えば「600」を指定した場合、600ピクセルの幅を下回る表示の場合は、レスポンシブ表示が無効になります。

direction

スクロールの方向を指定できるオプションです。

『vertical』を指定すると縦方向のスクロールになります。

『horizontal』を指定すると横方向のスクロールになります。