@thorikiriのてょりっき

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

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

なんとなくパララックスをやってみたかったので、やってみました。
基本的には、windowのスクロールイベントを拾ってwindowのScrollTopを判断して処理をするだけですので、簡単です。難しいのは表現方法を考えたりすることではないでしょうかね。
jQueryを使えば簡単です。
$(window).scroll(function() { /* ここに処理を書く */ });
$(window).scrollTop()で取得した値を元に判定する。

サンプルはこちら。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>パララックス</title>
    <style type="text/css">
body {
  width: 100%;
  height: 4096px;
  margin: 0;
  padding: 0;
}
#wrapper {
  width: 100%;
  height: 100%;
}
#message {
  position: fixed;
  top: 10px;
  left: 10px;
}
#box {
  position: fixed;
  top: 40px;
  left: 10px;
  width: 60px;
  height: 60px;
}
    </style>
  </head>
  <body>
    <div id="message"></div>
    <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 width = window.innerWidth,
            height = window.innerHeight;
        $(document.body).css('height', 4 * height);
        $(window).scroll(parallax);
        
        function parallax() {
            var value = $(window).scrollTop();
            $('#message').text(value);
            if (value <= height) {
                $('#wrapper').css('background-color', '#ccc');
                $('#box').css('left', 10 + value * width / height);
            } else if (value <= height * 2) {
                $('#wrapper').css('background-color', '#999');
                $('#box').css('left', 10 + (value - height) * width / height);
            } else if (value <=  height * 3) {
                $('#wrapper').css('background-color', '#666');
                $('#box').css('left', 10 + (value - height * 2) * width / height);
            }
        }
        parallax();
    });
})();
    </script>
  </body>
</html>