one's way blog

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

【22:パララックス1】スクロールで要素が変形

f:id:seintoseiya:20150725214352p:plain
プロジェクトNo.22:パララックス1

パララックスとはparallax=(観察者の位置の移動による)変位、
つまり視差の事で、視点の差を使って立体的な効果を出すことをパララックス効果と言います。
一時期流行った手法ですね。
今回はスクロールすることで要素が変形する様なパララックスサイトをJQueryを使って作ってみました。

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

まずはスクロール時のy軸の値を取得します。

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

訳すると「ウインドウをスクロールした時にスクロールのトップ座標を取得する」です。

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

後はdyを使ってcssを変更していけばOKです。

JavaScript
// パ
$('#pa1').css('top', pos1.top + dy / 10);
$('#pa1').css('width', 40 + dy * 0.03);
$('#pa1').css('height', 40 - dy * 0.01);
$('#pa1').css('transform', 'rotate('+(dy*0.05)+'deg)’);

全ソースはこちら

github.com

関連アプリ・書籍

jQuery入門道場

jQuery入門道場

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

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

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

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