takustaqu/gist:f9b6822afba00347d3c3194f20ec9278

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

</head>
<body>


<section class="sect">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis quod, eos accusamus debitis similique quasi assumenda, tenetur quidem. Nihil itaque perspiciatis mollitia consequatur sapiente iste voluptatum odio repudiandae quas debitis.</section>
<section class="sect">

  <div id="hello">
    Hello,world
  </div>

</section>
<section class="sect">Hic eum quibusdam perferendis dolores eos, ea reiciendis cum. Libero voluptas sint, voluptate praesentium eum reprehenderit, recusandae magni ratione, quos maiores vero quis dicta aspernatur tempore? Illo alias, facilis necessitatibus.</section>
<section class="sect">Ratione voluptatum vitae delectus, quidem consequatur ad accusamus possimus. Enim voluptatum, optio perferendis debitis, neque doloremque! Inventore facilis temporibus ducimus illum rem enim laudantium nisi quia dolor laboriosam. Animi, illum.</section>
<section class="sect">Deserunt, dolores. Minus accusamus recusandae ratione praesentium, laborum dignissimos. Magni, cumque atque odio fugit commodi maiores corporis natus hic sunt perspiciatis laborum aut minus dicta, labore quos error quasi excepturi.</section>
<section class="sect">Corrupti praesentium id nam numquam molestias blanditiis! Voluptatum delectus aperiam, quisquam quidem quam voluptas ratione asperiores ullam saepe eveniet, non porro sed nihil expedita dolorem veniam molestias. Libero, obcaecati quo.</section>
<section class="sect">Vitae impedit rerum, doloribus nemo minima voluptatibus nesciunt ipsam expedita obcaecati eos nihil itaque veritatis, temporibus laudantium animi voluptates, explicabo eligendi et ad. Porro commodi ea aliquam soluta. Explicabo, porro.</section>
<section class="sect">Accusantium facilis sunt aspernatur nostrum, quia beatae, earum deleniti expedita. Aut quaerat officia eligendi ducimus at unde tempora nostrum quas, voluptate beatae, minus voluptatum impedit repellendus alias distinctio fugit. Odio.</section>
<section class="sect">Dicta unde ad commodi facere ut maxime illum a, consequuntur et praesentium ipsum asperiores beatae, ex officiis nesciunt debitis! Iste tempore numquam commodi saepe eligendi aliquid possimus corrupti ad. Saepe.</section>
<section class="sect">Autem labore dicta, nisi reiciendis, suscipit consequatur rerum. Veritatis quasi autem voluptatibus perferendis veniam quia quaerat quos totam, facere ab sint nesciunt, natus officiis magnam velit id doloremque ipsum in.</section>

<style>
.sect {
  height:100vh;
  background-color: #ccc;
  opacity:0;
  transition:opacity 1s linear 0s;
  position: relative;
}
.sect.appear {
  font-weight:bold;
  opacity:1;
}

.sect.appear.current {
}

.sect:nth-child(2n){
  background-color: #eee;
}

#hello {
  width:256px;
  height:256px;
  line-height:256px;
  text-align:center;
  margin:-128px;
  position: absolute;
  left:50%;
  top:80%;
  opacity:0;
  transition: all 0.5s linear 0s;
}

.sect.appear.current #hello {
 top:50%;
 opacity: 1;

}

</style>

<script>

$(function(){


  var $targets = $(".sect");
  $(window)
    .on({
      "scroll":function(e){
        var SCROLL_TOP = $(this).scrollTop();
        var SCREEN_HEIGHT = $(this).height();
        var SCROLL_BOTTOM = SCROLL_TOP + SCREEN_HEIGHT;

        $targets.each(function(i){
          var OFFSET = $(this).offset();
          var HEIGHT = $(this).height();
          var BOTTOM_OFFSET = OFFSET.top - SCROLL_BOTTOM;
          var IS_APPEAR = BOTTOM_OFFSET < 0 && OFFSET.top+HEIGHT > SCROLL_TOP;

          var RATE = 0.3;
          var SHIFT = HEIGHT * RATE;
          var IS_APPEAR_NARROW = BOTTOM_OFFSET+SHIFT < 0 && OFFSET.top+HEIGHT-SHIFT > SCROLL_TOP;

          if(IS_APPEAR){
            $(this).addClass("appear");
          } else {
            $(this).removeClass("appear");
          }

          if(IS_APPEAR_NARROW){
            $(this).addClass("current");
          } else {
            $(this).removeClass("current");
          }

        });
      }
    })
    .trigger("scroll");
});
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

	</head>
	<body>


	<section class="sect">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis quod, eos accusamus debitis similique quasi assumenda, tenetur quidem. Nihil itaque perspiciatis mollitia consequatur sapiente iste voluptatum odio repudiandae quas debitis.</section>
	<section class="sect">

	<div id="hello">
	Hello,world
	</div>

	</section>
	<section class="sect">Hic eum quibusdam perferendis dolores eos, ea reiciendis cum. Libero voluptas sint, voluptate praesentium eum reprehenderit, recusandae magni ratione, quos maiores vero quis dicta aspernatur tempore? Illo alias, facilis necessitatibus.</section>
	<section class="sect">Ratione voluptatum vitae delectus, quidem consequatur ad accusamus possimus. Enim voluptatum, optio perferendis debitis, neque doloremque! Inventore facilis temporibus ducimus illum rem enim laudantium nisi quia dolor laboriosam. Animi, illum.</section>
	<section class="sect">Deserunt, dolores. Minus accusamus recusandae ratione praesentium, laborum dignissimos. Magni, cumque atque odio fugit commodi maiores corporis natus hic sunt perspiciatis laborum aut minus dicta, labore quos error quasi excepturi.</section>
	<section class="sect">Corrupti praesentium id nam numquam molestias blanditiis! Voluptatum delectus aperiam, quisquam quidem quam voluptas ratione asperiores ullam saepe eveniet, non porro sed nihil expedita dolorem veniam molestias. Libero, obcaecati quo.</section>
	<section class="sect">Vitae impedit rerum, doloribus nemo minima voluptatibus nesciunt ipsam expedita obcaecati eos nihil itaque veritatis, temporibus laudantium animi voluptates, explicabo eligendi et ad. Porro commodi ea aliquam soluta. Explicabo, porro.</section>
	<section class="sect">Accusantium facilis sunt aspernatur nostrum, quia beatae, earum deleniti expedita. Aut quaerat officia eligendi ducimus at unde tempora nostrum quas, voluptate beatae, minus voluptatum impedit repellendus alias distinctio fugit. Odio.</section>
	<section class="sect">Dicta unde ad commodi facere ut maxime illum a, consequuntur et praesentium ipsum asperiores beatae, ex officiis nesciunt debitis! Iste tempore numquam commodi saepe eligendi aliquid possimus corrupti ad. Saepe.</section>
	<section class="sect">Autem labore dicta, nisi reiciendis, suscipit consequatur rerum. Veritatis quasi autem voluptatibus perferendis veniam quia quaerat quos totam, facere ab sint nesciunt, natus officiis magnam velit id doloremque ipsum in.</section>

	<style>
	.sect {
	height:100vh;
	background-color: #ccc;
	opacity:0;
	transition:opacity 1s linear 0s;
	position: relative;
	}
	.sect.appear {
	font-weight:bold;
	opacity:1;
	}

	.sect.appear.current {
	}

	.sect:nth-child(2n){
	background-color: #eee;
	}

	#hello {
	width:256px;
	height:256px;
	line-height:256px;
	text-align:center;
	margin:-128px;
	position: absolute;
	left:50%;
	top:80%;
	opacity:0;
	transition: all 0.5s linear 0s;
	}

	.sect.appear.current #hello {
	top:50%;
	opacity: 1;

	}

	</style>

	<script>

	$(function(){


	var $targets = $(".sect");
	$(window)
	.on({
	"scroll":function(e){
	var SCROLL_TOP = $(this).scrollTop();
	var SCREEN_HEIGHT = $(this).height();
	var SCROLL_BOTTOM = SCROLL_TOP + SCREEN_HEIGHT;

	$targets.each(function(i){
	var OFFSET = $(this).offset();
	var HEIGHT = $(this).height();
	var BOTTOM_OFFSET = OFFSET.top - SCROLL_BOTTOM;
	var IS_APPEAR = BOTTOM_OFFSET < 0 && OFFSET.top+HEIGHT > SCROLL_TOP;

	var RATE = 0.3;
	var SHIFT = HEIGHT * RATE;
	var IS_APPEAR_NARROW = BOTTOM_OFFSET+SHIFT < 0 && OFFSET.top+HEIGHT-SHIFT > SCROLL_TOP;

	if(IS_APPEAR){
	$(this).addClass("appear");
	} else {
	$(this).removeClass("appear");
	}

	if(IS_APPEAR_NARROW){
	$(this).addClass("current");
	} else {
	$(this).removeClass("current");
	}

	});
	}
	})
	.trigger("scroll");
	});
	</script>
	</body>
	</html>