JQueryでページスクロールしたら、要素がふわっとフェードインするJQueryを実装した。

HTML

<div class="fadeIn">test</div>
<div class="fadeIn">test</div>

scroll.js

 $(window).on('load scroll', function (){

	var box = $('.fadeIn');
	var animated = 'animated';
	
	box.each(function(){
	
	  var boxOffset = $(this).offset().top;
	  var scrollPos = $(window).scrollTop();
	  var wh = $(window).height();
  
	  //画面内のどの位置で処理を実行するかで「100」の値を変更
	  if(scrollPos > boxOffset - wh + 100 ){
		$(this).addClass(animated);
	  }
	});
  });

CSS

.fadeIn {
  transition: 1.5s;
  opacity: 0;
  transform:translatey(100px);
}

.fadeIn.animated {
  opacity: 1;
  transform:translatey(0px);
}

これで、HTMLでfadeInのクラスが付与された「test」という文字が
スクロールするとふわっと下からフェードインするようになります。
JQueryでスクロールするとfadeInというクラスにanimatedというクラスが追加されるようにしてあるので、
CSSで指定している●pxの部分が、フェードインする動きの幅になるイメージです。

transformを使った方が良い

transform:translatey(●px）;ですが、
最初はmargin-topにしていました。

CSS

.fadeIn {
  transition: 1.5s;
  opacity: 0;
  margin-top: 100px;
}

.fadeIn.animated {
  opacity: 1;
  margin-top: 0px;
}

こんな感じで。

そしたら、ページ内リンクの位置がズレる・・・！
margin-topであった100pxがスクロールすることでanimatedクラスが追加されて、なくなってしまうからですね。。

transformはあまり使ったことありませんでしたが
勉強になりました◎