初心者webデザイナー・コーダーのための備忘録|Tech Stock 【テックストック】

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

> 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(^^


関連記事

【bxslider】最後のスライドが最初に表示されるバグの対処法
こんにちは。 今回はbxSliderのお話です。 スライダーのjsといえば bxSliderslickSwiper などなどありますね。 実
【jQuery】クリッカブルマップをレスポンシブ対応させるjs「jQuery RWD Image Maps」の使い方
クリッカブルマップでマークアップしたいとき、レスポンシブ対応させることができないかと思い調べたら余裕で見つかった。   しかも、要
【Javascript】ジャバスクリプトの基本文法【初心者向け】
web制作の現場で昨今非常によく使われているJavascript。 jQueryという非常に便利なツールが登場し、今ではjavascript
【bxsliderをif文の条件分岐で実行】要素の数によってスライダーを実装するかどうかを切り替える
こんにちは、管理人です。 今回は、要素の数によってbxslider(ボックススライダー)のスライダーを実行するか否かをJavaScriptで



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です