要素をふわっとフェードイン

ページを読み込んだときに1回フェードインさせることで
初期段階でスクロールせずともフェードインの効果をもたせる。

js

window.onload = function() {
	scroll_effect();
  
	jQuery(window).scroll(function(){
	 scroll_effect();
	});
  
	function scroll_effect(){
	 jQuery('.fade').each(function(){
	  var elemPos = jQuery(this).offset().top;
	  var scroll = jQuery(window).scrollTop();
	  var windowHeight = jQuery(window).height();
	  if (scroll > elemPos - windowHeight + 50){
	   jQuery(this).addClass('scrollin');
	  }
	 });
	}
  };

css

.fade {
    opacity: 0;
    transition : all 1500ms;
  }
  
  .fade.scrollin{
    opacity: 1;
  }

HTML

ふわっとさせたい要素のclassに「fade」を追加