なんとなくパララックスをやってみたかったので、やってみました。
基本的には、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>