スクロールすると表示するバナーの作り方

蒙古タンメン中本の味を自宅で再現しようと挑戦しているjyunzyです。
けど何回作っても辛い味噌汁にしかならないです。。。

今回は「Webページをスクロールすると表示するバナー」の作り方をご紹介します。
お問合せバナーによく使われているアレです。

CSSとJavascriptを使います。

CSS
div {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 0;
}

.fadein {
opacity: 1;
}

.fadeout {
opacity: 0;
}

Javascript
jQuery(function($){
$(window).scroll(function(){
if ($(window).scrollTop() > 900) {
$(‘#ID名’).addClass(‘fadein’);
$(‘#ID名’).removeClass(‘fadeout’);
} else {
$(‘#ID名’).removeClass(‘fadein’);
$(‘#ID名’).addClass(‘fadeout’);
}
});
});

フェードインはCSSのopacityで透明な物から不透明な物に変化させています。
フェードアウトはその逆です。
スクロールによる表示位置については、Javascriptでやってます。

フェードイン／フェードアウトの速度を変えたい時は、CSSのtransitionの1sの数字を変更して下さい。
また、スクロールの距離については、JavascriptのscrollTopの数字を変更して下さい。

意外と簡単にできますよ。