jQueryを使用する発想例、セクションが画面内に入ったらフェードインさせる【HTML/CSS】
今回はWEB制作コーディングからたどり着いた一つの考え方について
記載していく記事になります。
結論から言うと
jQuery専用のクラスを作り、そのクラスを実装した<section>を
フェードインさせるという考え方です。
これによって、下にスクロールするたびに
要素がフェードインしてくるという挙動が作れます。
コード
HTML
<section class="section01 j-fadein">
</section>
<section class="section02 j-fadein">
</section>
<section class="section03 j-fadein">
</section>
<section class="section04 j-fadein">
</section>
<section class="section05 j-fadein">
</section>セクションの中身は適当に作ってください。
「j-fadein」はjQuery専用クラスということにしてます。
画像ファイルなどが分かりやすいと思います。
ここで書くとファイルパスが違ってくるので割愛。
CSS
ziyuu自由です。
適当にどうぞ。
jQuery
スクロールするたびに、
if文で<section>ごとの高さまで来たらopacityを1.0にすればいいので
$('.section01').css('opacity', '0.0');
$('.section02').css('opacity', '0.0');
$('.section03').css('opacity', '0.0');
$('.section04').css('opacity', '0.0');
$('.section05').css('opacity', '0.0');
$(window).scroll(function(){
var w-size = $(window).height();
if($(window).scrollTop() > $('.section01').offset().top - w-size/2){
$('.section01').animate({opacity: 1.0}, 500);
}
if($(window).scrollTop() > $('.section02').offset().top - w-size/2){
$('.section02').animate({opacity: 1.0}, 500);
}
if($(window).scrollTop() > $('.section03').offset().top - w-size/2){
$('.section03').animate({opacity: 1.0}, 500);
}
if($(window).scrollTop() > $('.section04').offset().top - w-size/2){
$('.section04').animate({opacity: 1.0}, 500);
}
if($(window).scrollTop() > $('.section05').offset().top - w-size/2){
$('.section05').animate({opacity: 1.0}, 500);
}
});あらかじめCSSでopacityを0にしておかないのは
jQueryを無効にしている人たちに優しくないからです。
CSSで0にしておくと、jQueryを切っていた場合
opacityが0の要素しか出てこなくなるので白画面のままです。
それはさておき、
これで挙動は完璧に再現出来ていて、
スクロールしていけばセクションごとにフェードインしてくれます。
でもコードクソダサいですよね。
だからこそj-fadeinを使用しています。
$('.j-fadein').css('opacity', '0.0');
$(window).scroll(function(){
var w-size = $(window).height();
$('.j-fadein').each(function(){
if($(window).scrollTop() > $(this).offset().top - w-size/2){
$(this).animate({opacity: 1.0}, 500);
}
});
});こっちが完成版、なんというスマートさ。
まず1行目、5行あったコードが1行に。
3行目は、windowがスクロールしたらという文章。
5行目はw-sizeにウインドウの高さを入れただけ。
7行目はjQueryお得意のeach文。
「j-fadein」クラスが入っている要素すべてに
eachの中身を適応してくれます。
8行目は「スクロール位置が、this(各セクション)のトップ – ウインドウの半分の高さ地点
を通りすぎると」というif文。
9行目は「this(各セクション)を0.5秒かけてopacityを1にする」という文章。
thisとかいう指定便利過ぎて泣ける。
いきなり完璧なコードをかけるほどの腕がないので
段階を踏んで書いてみました。
ある意味、分かりやすいと思うので、
参考になれば幸いです。