要素がウィンドウ領域に入ったかを検知

縦長のページではアニメーションが伴っているものがよくありますが、スクロールによって要素がウィンドウ内に入ったかを検知して処理を実行する、といったものをjQueryでプラグインを使用せず作成します。

レスポンシブデザインで組んでいて要素の座標がウィンドウ幅によって変わるって場合でも大丈夫です。

今回は画像がウィンドウ内に入ったらopacityの値を1に、外に出たら0になるものを作成します。

html

<div id="wrapper">
	<h1>ウィンドウに入ったか検知するデモ</h1>
	<section>
		<div class="container">
			<h2>1つ目の画像</h2>
			<img src="./images/image_1.jpg" alt="1つ目の画像" />
		</div>
		<div class="container">
			<h2>2つ目の画像</h2>
			<img src="./images/image_2.jpg" alt="2つ目の画像" />
		</div>
		<div class="container">
			<h2>3つ目の画像</h2>
			<img src="./images/image_3.jpg" alt="3つ目の画像" />
		</div>
		<div class="container">
			<h2>4つ目の画像</h2>
			<img src="./images/image_4.jpg" alt="4つ目の画像" />
		</div>
		<div class="container">
			<h2>5つ目の画像</h2>
			<img src="./images/image_5.jpg" alt="5つ目の画像" />
		</div>
	</section>
</div>

<h1>ウィンドウに入ったか検知するデモ</h1>

<h2>1つ目の画像</h2>

</div>

<h2>2つ目の画像</h2>

</div>

<h2>3つ目の画像</h2>

</div>

<h2>4つ目の画像</h2>

</div>

<h2>5つ目の画像</h2>

</div>

</section>

</div>

css

html, body {
  width: 100%;
  font-size: 16px;
}

#wrapper {
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 8px;
}

h1 {
  font-size: 1.6em;
  margin-bottom: 20px;
}

.container:not(:last-child) {
  margin-bottom: 600px;
}

h2 {
  font-size: 1.4em;
}

img {
  width: 100%;
  height: auto;
}

html, body {

width: 100%;

font-size: 16px;

}

#wrapper {

box-sizing: border-box;

width: 100%;

max-width: 600px;

margin: 0 auto;

padding: 0 8px;

}

h1 {

font-size: 1.6em;

margin-bottom: 20px;

}

.container:not(:last-child) {

margin-bottom: 600px;

}

h2 {

font-size: 1.4em;

}

img {

width: 100%;

height: auto;

}

jQuery

$(document).ready(function(){
	$("img").css({
		"opacity": "0"
	});
	$(window).on("load",elemChange);
	$(window).on("scroll",elemChange);
	$(window).on("resize",elemChange);
	$(window).on("touchmove",elemChange);
	function elemChange(){
		$("img").each(function(i){
			var windowTop =$(window).scrollTop();
			var windowBottom = windowTop + $(window).height();
			var elemTop = $(this).offset().top;
			var elemBottom = elemTop + $(this).height();
			
			if(((elemTop <=  windowBottom && elemTop >= windowTop) || (elemBottom >=  windowTop && elemBottom <= windowBottom) || (elemTop <=  windowTop && elemBottom >= windowBottom)) && !($(this).hasClass("show"))){
				$(this).removeClass("hide").addClass("show");
				$(this).stop().animate({
					"opacity": "1",
				}, 1500);
			}else if((windowBottom < elemTop || windowTop > elemBottom) && !$(this).hasClass("hide")){
				$(this).removeClass("show").addClass("hide");
				$(this).stop().animate({
					"opacity": "0",
				}, 1500);
			}
		});
	}
});

$(document).ready(function(){

$("img").css({

"opacity": "0"

});

$(window).on("load",elemChange);

$(window).on("scroll",elemChange);

$(window).on("resize",elemChange);

$(window).on("touchmove",elemChange);

function elemChange(){

$("img").each(function(i){

var windowTop =$(window).scrollTop();

var windowBottom = windowTop + $(window).height();

var elemTop = $(this).offset().top;

var elemBottom = elemTop + $(this).height();

if(((elemTop <= windowBottom && elemTop >= windowTop) || (elemBottom >= windowTop && elemBottom <= windowBottom) || (elemTop <= windowTop && elemBottom >= windowBottom)) && !($(this).hasClass("show"))){

$(this).removeClass("hide").addClass("show");

$(this).stop().animate({

"opacity": "1",

}, 1500);