jQuery > Animation >parallax .4

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>
<ul id="nav">
    <li id="nav-0">Page0</li>
    <li id="nav-1">Page1</li>
    <li id="nav-2">Page2</li>
    <li id="nav-3">Page3</li>                                                              
</ul>

CSS

ul#nav {
    margin-left: 420px;
}
ul#nav li {
    color: #333;
}
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 winHeight = $(window).height();　 /* ディスプレイサイズ */
var incHeight = '+=' + String(winHeight) + 'px'; /* スクロールする量 */
var pages = $('div.page'); /*  ページの取得 */
// 位置の初期化
pages.each(function(i) {
    var distance = i * -winHeight;
    $(this).css({
        height: winHeight,
        top: distance,
        left: '0px'
    });
});
// 初期表示処理
var count = 0;
setTimeout(function move() {
    $('#back').animate({
        top: '-=165px',
        left: '0px'
    }, 1000, 'swing');
    pages.each(function(i) {
        $(this).animate({
            top: incHeight,
            left: '0px'
        }, 1000, 'swing');
    });
    count++;
    if (count < 3) {
        move(); // 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'
        });
    });
});