-
1:ID:XPYpbv · 2018-04-16

#コーディング https://www.p448shoes.com/ 
このサイトのような背景画像がフォーカスしていくようなのはどのようなjsもしくはcssをコーディングしているのでしょうか?
ご教授いただけると幸いです。

7 件の回答

2:ID:h1gAgI · 2018-04-16

ソース見てみれば?

3:ID:nZ8R87 · 2018-04-16

スクロール量はかってブラウザの高さはかってそれの比率でtweenmaxでスケールとxやyの数値をいじれ近いのできるんじゃね

4:ID: · 2018-04-20

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:ID:GLnwot · 2018-04-20

それを自分でやるのが仕事なんやで。

6:ID:KxzQVG · 2018-04-20

俺の見立てだと、5行くらいのネイティブjsで実装できるね。知らんけど。

7:ID:nZ8R87 · 2018-04-20

Re:4
eachの使い方間違えてるぞ。

1 件の回答が除外されました。[詳細]
コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る