前回は普通にやってみました。今回はスクロールすると、一部分が切り替わるサンプルです。
とは言え、切り替わるだけだと面白くないので、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>