ソース見てみれば?
スクロール量はかってブラウザの高さはかってそれの比率でtweenmaxでスケールとxやyの数値をいじれ近いのできるんじゃね
Re:3 回答ありがとうございます。下記で何となくうまく行きそうなんですが、<div class="center">を縦に二個並べたときにスクロールファンクションがうまくいきません。(最初の一個はうまく背景が1.2→1.0にスクロール量に応じてなります。)良い案無いでしょうか、、、【js】$(".h2_back").css("transform", "scale(1.2)"); $(window).scroll(function(){ $(".fadein").each(function(){ var imgpos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > imgpos - windowHeight + windowHeight/5){ TweenMax.to(".h2_back",1.2,{scale:1.0}); } /*else { TweenMax.to(".h2_back",1.2,{scale:1.2}); }*/ }); });【html】<div class="center"><!--背景用div--> <div class="h2_back"> </div><!--背景用div--> <h2 class="fadein"> <span>aaaaaaaa<br> aaaaaaaaaa<br> aaaaaaaaaaaa</span> </h2> </div>
それを自分でやるのが仕事なんやで。
俺の見立てだと、5行くらいのネイティブjsで実装できるね。知らんけど。
Re:4 eachの使い方間違えてるぞ。
7 件の回答
ソース見てみれば?
スクロール量はかってブラウザの高さはかってそれの比率でtweenmaxでスケールとxやyの数値をいじれ近いのできるんじゃね
Re:3
回答ありがとうございます。
下記で何となくうまく行きそうなんですが、<div class="center">を縦に二個並べたときにスクロールファンクションがうまくいきません。(最初の一個はうまく背景が1.2→1.0にスクロール量に応じてなります。)
良い案無いでしょうか、、、
【js】
$(".h2_back").css("transform", "scale(1.2)");
$(window).scroll(function(){
$(".fadein").each(function(){
var imgpos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > imgpos - windowHeight + windowHeight/5){
TweenMax.to(".h2_back",1.2,{scale:1.0});
}
/*else {
TweenMax.to(".h2_back",1.2,{scale:1.2});
}*/
});
});
【html】
<div class="center">
<!--背景用div-->
<div class="h2_back">
</div>
<!--背景用div-->
<h2 class="fadein">
<span>aaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaaaa</span>
</h2>
</div>
それを自分でやるのが仕事なんやで。
俺の見立てだと、5行くらいのネイティブjsで実装できるね。知らんけど。
Re:4
eachの使い方間違えてるぞ。