jQuery > Animation >parallax Horizonal .1

by s_hiroshi

HTML

<img id="back" src="http://www.findxfine.com/demo/images/parallax1.png" alt="parallax1" />
<div id="page-0" class="page">Page0</div>
<div id="page-1" class="page">Page1</div>
<div id="page-2" class="page">Page2</div>
<div id="page-3" class="page">Page3</div>

CSS

img#back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
div.page {
    opacity: 0.75;
    position: absolute;
    width: 400px;
    border: 1px solid #999;
    background: #ddd;
    z-index: 2;
}

JavaScript

// ディスプレイサイズ
var winWidth = $(window).width();
var winHeight = $(window).height();
// 背景画像
$('#back').attr('width', winWidth);
// スクロール量
var incWidth = '+=' + String(winWidth) + 'px';
var incHeight = '+=' + String(winHeight) + 'px';
var pages = $('div.page'); /*  ページの取得 */
// 位置の初期化
pages.each(function(i) {
   var distanceX = i * -winWidth;
   var distanceY= i * -winHeight;
   $(this).css({
       width: winWidth,
       height: winHeight,
       top: '0px',
       left: distanceX,
   });
});
// 初期表示処理
var count = 0;
setTimeout(function scroll() {
   $('#back').animate({
       top: '-=10',
       left: '0px'
   }, 1000, 'swing');
   pages.each(function(i) {
       $(this).animate({
           top: '0px',
           left: incWidth
       }, 1000, 'swing');
   });
   count++;
   if (count < 3) {
       scroll(); // arguments.calleeはJsLintではさけるように言われる。
   }
}, 1000);
var navs = $('ul#nav li');
navs.each(function(i) {
   $(this).click(function(e) {
       var id = $(e.currentTarget).attr('id').split('-');
       $('#page-' + id[1]).css({
           top: '0px'
       });
   });
});