スクロールしたらふわっと浮かんでくるあれ

a0002_011891_m
久しぶりに時間空いたから記事書く。
今回はCSSとJSを合わせた、スクロールインするもの。

解説

サイトでよく見る、スクロールしたら下からふわっと要素が浮かびあがるやつ。
事前準備としてjQueryを入れる必要がある。
あと、CSS3を使用するため、IE8とかだと動かないよ!

まずHTML

<div class="scroll">
ここにスクロールインする内容
</div>
<div class="scroll">
ここにスクロールインする内容
</div>
<div class="scroll">
ここにスクロールインする内容
</div>

内容は画像とか文字とかでもいいし、ブロック要素でもいいし。
次にcss

.scroll {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 500ms;
}
.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

opacityは透明度。0だと完全に消える。1だと完全に表示される。scrollの方は0とか0.1あたり、scrollinは1固定で。
transformは変形全般を扱うプロパティ。今回はその中でも移動に関してを記述している。ここでいうなら、どのぐらい下の位置からふわっとさせるか。50pxって書いてあるところを任意の数字にしていい。
transitionは変形にかかる時間。500の数字を大きくすればゆっくり変化するようになるし、小さくすれば早く変化するようになる。

最後にjs

$(function(){
    $(window).scroll(function (){
        $('.scroll').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight + 200){
                $(this).addClass('scrollin');
            }
        });
    });
});

すごくざっくり書くと、要素が画面に入るところから下に200px行った位置に画面が入った時、クラス名scrollの書かれたタグにクラス名scrollinを追加するってやつ。

めっちゃ簡単なんだけど、注意事項としては、cssの「transform : translate(0, 50px);」によってフッターよりも.scroll要素が下に行ったりするとうわあああってなる。
そういう時は、overflow使うとかposition使うとか50よりも少ない数字にするとかすればなんとかなると思う(適当)。数字20とかにするのが無難だけど。

あと、ページ内移動をしようとすると少し面倒臭いことになる。最初はscroll要素がそれぞれ50pxずつ下にあるから。
対策としては、position:absoluteでページ内移動用のdivを用意してやるとか、if文で1回目と2回目以降で分岐するようにするとか。あとはずれても大丈夫なようなデザインにするかかな。

別パターン

どうしてもIE8で動かしたい!かつCSS3を使えるようになるようなものを入れたくないって人に。
こちらもjQueryは使ってる。

HTMLは変わらず。

<div class="scroll">
ここにスクロールインする内容
</div>
<div class="scroll">
ここにスクロールインする内容
</div>
<div class="scroll">
ここにスクロールインする内容
</div>

cssはこんな感じ。説明不要。

.scroll {
    opacity : 0;
    margin-top:50px;
}

最後にjs。

$(function(){
    $(window).scroll(function (){
        $('.scroll').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight + 200){
                $(this).animate({opacity:"1", marginTop:"0px"},500);
            }
        });
    });
});

jQueryのanimateでアニメーションさせてる。animateの中に書いてあるのが変化後のcssで、500ってのがかかる時間。
これならIE8でも動く。
これで全部動くならこれでよくね?って思うかもしれないけど、animateとtransformだとなめらかさが全然違う。
圧倒的にtransformの方が動きがいい。まあ、それだけなんだけど、そういうの大事だと思う。

「スクロールしたらふわっと浮かんでくるあれ」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。