kdcsライブラリー

以下の記述で簡単に行える

動作させたい要素にクラスを付加する

<div class="fadeUp">
<!-- フワっとフェードインさせたい要素 -->
</div>

javascript

$(window).scroll(function () {
  var scrollAnimationElm = document.querySelectorAll('.fadeUp');
  var scrollAnimationFunc = function () {
    for (var i = 0; i < scrollAnimationElm.length; i++) {
      var triggerMargin = 100;
      if (window.innerHeight > scrollAnimationElm[i].getBoundingClientRect().top + triggerMargin) {
        scrollAnimationElm[i].classList.add('on');
      }
    }
  }
  window.addEventListener('load', scrollAnimationFunc);
  window.addEventListener('scroll', scrollAnimationFunc);
});

css

/*----------------------------
fadeUp ｜下から上へ出現
----------------------------*/
.fadeUp {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.fadeUp.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
fadeLeft ｜左から出現
----------------------------*/
.fadeLeft {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.fadeLeft.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
fadeRight ｜右から出現
----------------------------*/
.fadeRight {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.fadeRight.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}