【23：パララックス2】スクロールで背景位置の変更＆要素が出現

f:id:seintoseiya:20150726195323p:plain
プロジェクトNo.23：パララックス2

前回に続けてパララックス効果を使ったサイト第２弾。
今回はスクロールすることで背景位置が変わるのと、要素が出現するパララックスサイトを作って見ました。

スクロールした時のy軸座標を取得する

前回同様、まずはスクロール時のy軸の値を取得します。

JavaScript

$(window).scroll(function() {
        var dy = $(this).scrollTop();
});

y軸座標を使ってcssを変更

背景位置の変更

background-positionを変更することで、パララックスサイトでよく見る表現ができる様になります。

JavaScript

$('#bg1').css('background-position', '0 '+dy+'px');

if(dy > 800){
    $('#bg2').css('background-position', '0 '+(dy-800)+'px');
}else{
    $('#bg2').css('background-position', '0 0');
}
if(dy > 1600){
    $('#bg3').css('background-position', '0 '+(dy-1600)+'px');
}else{
    $('#bg3').css('background-position', '0 0');
}

要素の出現

opacityやtop、leftなどを使って文字をアニメーションさせながら出現させます。

// パ
if(dy > 1600){
    $('#msg1').css('opacity', (dy-1600)/800);
    $('#msg1').css('top', 100);
    var dx = (dy-1600) > $(this).width()/2-24 ? $(this).width()/2-24 : (dy-1600);
    $('#msg1').css('left', dx);
}else{
    $('#msg1').css('opacity', 0);
}