スクロール関連のプラグイン - 未経験のwebサイト制作の勉強

Animate On Scroll Library

スクロールすると、コンテンツが色々なエフェクトで表示される。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Animate On Scroll Library プラグイン</title>
<style>
html,body {
  margin:0;
  padding:0;
}
body {
  background:url(img/main.jpg) no-repeat center center/cover;
  width:100%;
  height:100vh;
  background-attachment:fixed;/*背景画像がスクロールしても固定*/
}
header {
  width:100%;
  height:80vh;
  text-align:center;
  font-size:100px;
  margin-bottom:300px;
}
.container {
  width:80%;
  margin: 0 auto;
  background:rgba(255,255,255,0.5);
  
  overflow:hidden;
}
.aos_box {
  width:60%;
  height:300px;
  background:#FFF;
  margin:10px;
  float:left;
  margin-bottom:100px;
}
.aos_box:nth-child(even){
  float:right;
}
.top_btn {
  width:50px;
  height:50px;
  background:#333;
  border-radius:50%;
  white-space:nowrap;
  text-indent:100%;
  overflow:hidden;
  position:fixed;
  bottom:40px;
  right:40px;
  z-index:999;
  border:1px solid #FFF;
}
.top_btn span {
  display:block;
  width:20px;
  height:20px;
  border-top:2px solid #FFF;
  border-right:2px solid #FFF;
  transform:rotate(-45deg);
  position:absolute;
  top:10px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}

</style>
<link rel="stylesheet" href="css/aos.css">
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
	$('#to_top').on('click',function(){
		$('html,body').animate({ scrollTop: 0 }, 'swing');
		return false;
	});

	$('#to_top').hide();//まず隠す
	 $(window).scroll(function(){//スクロールイベントの設定
	 
	  if ($(this).scrollTop() > 200) {
            $('#to_top').fadeIn();
        } else {
            $('#to_top').fadeOut();
        };
	 });
	
});
</script>
</head>

<body >
<div class="container">
<header>Animate On<br>Scroll Library</header>

<a href="#">
<div class="aos_box" data-aos="fade-up">
</div>
</a>

<div class="aos_box" data-aos="fade-up"></div>
<div class="aos_box" data-aos="fade-up"></div>
<div class="aos_box" data-aos="fade-up"></div>
<div class="aos_box" data-aos="fade-up"></div>
<div class="aos_box" data-aos="fade-up"></div>
<div class="aos_box" data-aos="flip-up">
<p>テキストテキストテキスト</p>
</div>
<div class="aos_box" data-aos="flip-up">
<p>テキストテキストテキスト</p>
</div>
<div class="aos_box" data-aos="flip-up">
<p>テキストテキストテキスト</p>
</div>
<div class="aos_box" data-aos="flip-up">
<p>テキストテキストテキスト</p>
</div>
<div class="aos_box" data-aos="flip-up">
<p>テキストテキストテキスト</p>
</div>
<div class="aos_box" data-aos="flip-up">
<p>テキストテキストテキスト</p>
</div>
</div>
<a href="#top" id="to_top"><p class="top_btn">トップに戻る<span></span></p></a>


<script src="js/aos.js"></script>
<script>
  AOS.init({
        easing: 'ease-in-out-sine'
      });
</script>
</body>
</html>

ScrollTrigger

terwanerik.github.io
AOSよりもなめらかにスクロールイベントが表示される印象です。
表示の仕方はAOSよりは好きです・・

<div class="inner"  data-scroll="toggle(.fromBottomIn, .fromBottomOut)">