読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

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

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

前回に続けてパララックス効果を使ったサイト第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);
}

ポイントは文字を中央に配置するためのこれです。

$(this).width()/2-24

windowのwidthを取得して、2で割りフォントサイズの半分を引いてます。

全ソースはこちら

github.com

関連アプリ・書籍

jQuery入門道場

jQuery入門道場

jQuery レッスンブック jQuery2.X/1.X対応

jQuery レッスンブック jQuery2.X/1.X対応

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)