jQuery > Animation >Parallax .3

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;
    border: 1px solid #999;
    background: #ddd;
    z-index: 2;
}

JavaScript

/*
 * Parallax Scroll .3
 */


// 初期設定
var winHeight = $(window).height(); // ディスプレイサイズ
var incWinHeight = '+=' + String(winHeight) + 'px'; // スクロール量
var pages = $('div.page');
// 初期位置の設定
pages.each(function(i) {
    var distance = i * -winHeight;
    $(this).css({
        width: '400px',
        height: winHeight,
        top: distance,
        left: '0px'
    });
});
// スクロール処理
var count = 0;
setTimeout(function scroll() {
    $('#back').animate({
        top: '-=165px',
        left: '0px'
    }, 1000, 'swing');
    pages.each(function(i) {
        $(this).animate({
            top: incWinHeight,
            left: '0px'
        }, 1000, 'swing');
    });
    count++;
    if (count < 3) {
        // 再帰 JsLintではarguments.calleeは非推奨
        // arguments.callee();
        scroll();
    }

}, 1000);