jQuery > Animation >parallax Horizonal .2

by s_hiroshi

HTML

<div id="display">
<img id="back" src="http://www.findxfine.com/demo/images/parallax1.png" alt="parallax1" />
<div id="page-0" class="page"><p>2009</p></div>
<div id="page-1" class="page"><p>2010</p></div>
<div id="page-2" class="page"><p>2011</p></div>
<div id="page-3" class="page"><p>2012</p></div>
</div>

CSS

div#display {
    position: relative;
}
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;
}
div.page p {
    margin: 20px;
    font-size: 150px;
}

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'); /*  ページの取得 */
// 位置の初期化
$('div#display').css({
    overflow: 'hidden',
    width: winWidth,
    height: winHeight
});

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;
var duration = 2000;
setTimeout(function scroll() {
    $('#back').animate({
        top: '-=10',
        left: '0px'
    }, 1000, 'swing');
    pages.each(function(i) {
        $(this).animate({
            top: '0px',
            left: incWidth
        }, duration, 'swing');
    });
    count++;
    if (count < 3) {
        duration -= 500;
        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'
        });
    });
});