jQueryに関する自分用メモ

・フェードイン

function fadeUpEffect() {
		$('.fadeUpEffect').each(function () {
			var element = $(this).offset().top + 100; //画面上からの距離。+100でmargin-top: 100px;の意味。
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			if (scroll >= element - windowHeight) {
				$(this).addClass('fadeUp');
			}
		});
  }
  $(window).scroll(function () {
		fadeUpEffect();
  });

CSS↓↓

.fadeUpEffect {
  opacity: 0;   //該当する要素を透明にしとく。
}

.fadeUp {
  opacity: 0;
  animation-name: fadeUp;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}