パララックスっていうと少し古い表現って印象あるけど、まだまだ最新のサイトでも使われてる。
ただ、パララックス系のプラグインって数年前に作成されたっていうのが多くて、もう配布されてないものとかも結構あるし、ちょっと怖い。
なので、TweenMaxでできないかって試してみた。
作り方
まず、htmlを用意する。
<div class="parallax_block"> <div class="parallax_contents"> <!-- ここにコンテンツをいれる --> </div><!-- １番目のレイヤー --> <div class="parallax_bg_01"></div><!-- ２番目のレイヤー --> <div class="parallax_bg_02"></div><!-- ３番目のレイヤー --> <div class="parallax_bg_03"></div><!-- ４番目のレイヤー --> </div>
クラス名はお好みで。今回は解説するためにわかりやすく、長いクラス名をつけてる。
今回は４枚のレイヤーを重ねたような表現での例。
.parallax_contentsは通常のスクロール速度。
.parallax_bg_01は通常スクロールよりめっちゃ早く。
.parallax_bg_02は通常スクロールよりまあまあ早く。
.parallax_bg_03は通常スクロールより少し早く。
ざっくりだけどこういう感じで作ってみる。
CSSについても一応
.parallax_block {
position: relative;
overflow: hidden;
}
.parallax_block .parallax_bg_01 {
background: url(img/parallax_bg_01_img.png) no-repeat top center;
background-size: contain;
position: absolute;
left: 0;
z-index: 3;
width: 100%;
height: 20%;
}
.parallax_block .parallax_bg_02 {
background: url(img/parallax_bg_02_img.png) no-repeat top center;
background-size: contain;
position: absolute;
left: 0;
z-index: 2;
width: 100%;
height: 20%;
}
.parallax_block .parallax_bg_03 {
background: url(img/parallax_bg_03_img.png) no-repeat top center;
background-size: contain;
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 20%;
}
いろいろと簡略してるけど、最低限。
めっちゃ早く動かしたいレイヤーに配置されている画像はparallax_bg_01_img.png。
まあまあ早く動かしたいレイヤーに配置されている画像はparallax_bg_02_img.png。
少し早く動かしたいレイヤーに配置されている画像はparallax_bg_03_img.png。
あとはabsoluteで重ねて、z-indexで重ね順を指定する。
最後にjs。
$(function() {
var parallax_h = $(".parallax_block").height();
$(window).on("resize", function() {
parallax_h = $(".parallax_block").height();
});
var tween_01_pos,tween_02_pos,tween_03_pos;
var tween_01,tween_02,tween_03;
$(window).on("load resize scroll", function() {
st = $(window).scrollTop();
if(ww > 750) {
// PC parallax
tween_01_pos = parallax_h/100*8;
tween_02_pos = parallax_h/100*3;
tween_03_pos = parallax_h/100*3;
tween_01 = TweenMax.to(".parallax_block .parallax_bg_01", 1, {ease: Power3.easeOut,top: tween_01_pos - st/4 + "px"});
tween_02 = TweenMax.to(".parallax_block .parallax_bg_02", 1, {ease: Power3.easeOut,top: tween_02_pos - st/10 + "px"});
tween_03 = TweenMax.to(".parallax_block .parallax_bg_03", 1, {ease: Power3.easeOut,top: tween_03_pos - st/50 + "px"});
} else {
// SP parallax
// PCと同じ感じで書くので省略
}
});
});
まず、.parallax_blockの高さを取得する。あらかじめその高さが指定されている場合はparallax_hの計算は不要。
あとはページが読まれたとき、リサイズされたとき、スクロールされたときに.parallax_bg_01、.parallax_bg_02、.parallax_bg_03の移動位置を計算。
そして、その計算された場所にアニメーションで移動する。
TweenMaxの記述については以前書いたけど、簡単に説明。
TweenMax.to(".parallax_block .parallax_bg_01", 1, {ease: Power3.easeOut,top: tween_01_pos - st/4 + "px"});
TweenMax.toは「現在の状態から()内の状態にしていくアニメーション」記述。
“.parallax_block .parallax_bg_01″の部分にはアニメーションさせたい要素を。
1のところはアニメーションにかける秒数。ミリ秒じゃない点注意。
{}内にアニメーションの内容を書いていく。
ease: Power3.easeOutはイージング。イージングについては公式サイトを見ればわかる。
https://greensock.com/ease-visualizer
top: tween_01_pos – st/4 + “px”で、topの値をアニメーションさせていく。
topの値について少し解説すると、
tween_01_pos = parallax_h/100*8;
ここが初期値。”.parallax_block .parallax_bg_01″が最初にある場所を指定する。
で、tweenmax。
top: tween_01_pos - st/4 + "px"
stはスクロール量なので・・・
top: （parallax_bg_01の初期値） – （スクロール量の４分の１） + “px”
となる。
これによって、parallax_bg_01は通常のスクロールよりも、スクロール量の４分の１早くスクロールされていく。
ここの４という数字を少なくすることで通常のスクロールよりも早くスクロールされていく。
逆に、通常スクロールより遅くしたいときは・・・
top: tween_01_pos + st/4 + "px"
みたいな感じで、－の部分を+にしてしまおう。
また、tweenMaxのアニメーションで良い点として、
tween_01実行中にもう１回tween_01が実行されたとき、１回目のアニメーションが自動でキャンセルされる。
わざわざkill()とかしなくていい点、楽だよね。
では