@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

パララックスやってみた 2。

前回は普通にやってみました。今回はスクロールすると、一部分が切り替わるサンプルです。
とは言え、切り替わるだけだと面白くないので、Ajaxで切り替わる部分のテンプレートを取得することにしました。全然難しくないですね。
テンプレートファイルを配列で定義して、順番にAjaxで取ってきて、差し替えるだけです。

こんな感じ。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>パララックス</title>
    <style type="text/css">
body {
  width: 100%;
  margin: 0;
  padding: 0;
}
#wrapper {
  width: 100%;
  height: 100%;
}
#box {
  position: fixed;
  top: 40px;
  left: 60%;
  width: 20%;
  height: 200px;
  background-color: #ccc;
  color: #333;
}
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="box">BOX</div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript">
(function() {
    $(function() {
        var w = window.innerWidth,
            h = window.innerHeight,
            index = -1,
            files = [
                'template/1.html',
                'template/2.html',
                'template/3.html'
            ];
        $(document.body).css('height', 4 * h);
        $(window).scroll(parallax);
        
        function parallax() {
            var value = $(window).scrollTop(),
                i = Math.floor(value / h);
            if (index != i) {
                index = i;
                if (files[i]) {
                    $.get(files[i], function(html) {
                        $('#box').html(html);
                    });
                }
            }
        }
        parallax();
    });
})();
    </script>
  </body>
</html>