【Javascript】スクロールで要素を表示させる方法

物事を継続させることが成功の「最初の一歩」であり、「最大の一歩」。

どうも、 ジャバスクリプトを勉強中の管理人です。

私はweb制作の仕事をしているのでjsでいろいろな仕様を実装することがあるのですが、最近やってみた「スクロールで要素を表示」させる仕様を備忘録がてら書いてみようと思います。

Javascriptの基礎的な感覚を知りたい方はこちら。

スクロールで要素を表示させる原理

いつも通り、結論から、と言いたいところですが、今回は少し説明を交えた方がわかりやすいと思いますので、少し解説を入れたいと思います。

htmlでこのように書いたとします。

<div id ="scroll_visible">
　<p>スクロールで表示される</p>
</div>

jsではこう。

<script>
jQuery(window).scroll(function (){
	jQuery("#scroll_visible").each(function(){
	  var position = $(this).offset().top;
	  var scroll = $(window).scrollTop();
	  var windowHeight = $(window).height()*0.7;
	  if (scroll > position - windowHeight){
	    jQuery(this).addClass('active');
	  }else{
	  jQuery(this).removeClass('active');
	  }
	});
});
</script>

スクロールすることで、該当の要素にclass「active」を付与する仕組みです。

普段ジャバスクリプトを使う人ならわかるかと思いますが、

• position：ページの上部から要素までの長さ
• scroll：ページ上部から画面の上部までの長さ
• windowHeight：画面の縦の長さ

を定義・取得して、スクロールしたときに画面に入ってきたときにclassを付与する、という仕組みです。

「active」が付いた要素に動きのあるcssを指定することで、スクロールしたときに要素を表示させたり、移動させたり、変形させたり、様々な動きをじっそうすることができるのです！

スクロールで「ジワッと」表示させてみる

では、次に、class「active」を付与した要素を、どのように動かすのかを設定していきましょう。

今回はジワっと表示させるためのcssを書いてみました。
opacityを指定するだけなのでとても簡単ですね♪

<style>
#scroll_visible{
opacity:0;
transition: all 0.5s;
}
#scroll_visible.active{
opacity:1;
}

#scroll_visible p{
padding:20px;
background: #f7e0c1;
display:inline-block;
}
</style>

ちなみにこんな感じで表示されます。
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

まとめ・最後にメッセージ

activeのclassが付いた要素に様々なcssを適用することで、様々な動きを実装できます♪

transformを合わせて指定すると、下からふわっと表示させることもできますよ！

ジャバスクリプトを学び始めた初心者の方には、少しだけ難しかったかもしれませんが、今のスキル・知識よりも少しだけ高いハードルを用意することで、さらに高みへ進めると思います。

あきらめず、継続して、「最初の一歩」、もとい、「最大の一歩」を踏み出してください d(^^
踏み出し続けてください d(^^