jquery.onepage-scrollを使ってみた

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

っていうのを使う事で、画面1ページづつスクロールして見れるWebサイトみたいなのを実現できるっぽいのでやってみた

要件

上記で書いてるようにスクロールで1ページづつ表示するのはもちろんの事、サイドバーやナビゲーションを利用してリンクをクリックする事でページをスクロール出来るようにするとか。今回はTwitter Bootstrap(2.3.2)のナビゲーションバーを使う

必要な物

jquery.js
jquery.onepage-scroll.js
onepage-scroll.css

が最低でも必要なので取ってくる。で今回はbootstrapも使うのでそれもついでに

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="onepage-scroll.css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.onepage-scroll.js"></script>
    <script type="text/javascript" src="bootstrap.min.js"></script>
  </head>
  <body>
    <style type="text/css">
#main {
  margin: 50px;
}

.onepage-pagination {
  visibility: hidden;
}
    </style>
    <div class="navbar navbar-fixed-top navbar-inverse">
      <div class="navbar-inner">
        <div class="container">
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#" onclick="pageScroll(1)">Section1</a></li>
              <li><a href="#" onclick="pageScroll(2)">Section2</a></li>
              <li><a href="#" onclick="pageScroll(3)">Section3</a></li>
          </div>
        </div>
      </div>
    </div>
    <div id="main">
      <section id="1">
        <h1>Section1</h1>
      </section>
      <section id="2">
        <h1>Section2</h1>
      </section>
      <section id="3">
        <h1>Section3</h1>
      </section>
    <div>
    <script type="text/javascript">
$(document).ready(function() {
  $("#main").onepage_scroll({
    sectionContainer: "section"
  });

  // スクロール後のページ切り替えに関するコールバックが無いので、mousewheelなイベントでスクロール後のページと合うナビゲーションをupdateElementする。これをやらないとスクロールによる現在のページとナビゲーションが合わない

  $(document).bind("mousewheel", function() {
    var className = $("body").attr("class");

    if (className === null || className === undefined)
      return;

    // body class="viewing-page-1" のような形で取得されるのでそれを正規表現で最後のナンバリングな部分を取得する
    var pageNumbers = className.match(/([d]+)$/);
    $.unique(pageNumbers).forEach(function(page) {
      updateElement(page);
    });
  });
});

function pageScroll(page) {
  // onepage_scrollで組み込まれるul.onepage-paginationを利用してナビゲーションをクリックした際にページスクロールをするようにイベントをトリガーする。又、上記でonepage-paginationはvisibility: hiddenにしているので見えない

  $(
    ".onepage-pagination > li > a[data-index="" + page + ""]"
  ).trigger("click");

  updateElement(page);
}

function updateElement(page) {
  $(".nav > li").removeClass("active");
  $(".nav > li:nth-child(" + page + ")").addClass("active");
}
    </script>
  </body>
</html>

終わり。という事で動作をキャプチャした動画を用意しました

{% youtube 0niaHqpokgc %}