【22：パララックス1】スクロールで要素が変形
プロジェクト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)’);
