jQuery/スクロールアニメーション

スクロールアニメーション

フェードイン

上へスライド

ズームイン

フェードインしながら上へスライド

回転

ズーム+回転

左から

jQuery
$(function(){
  // フェードイン
  $('.inviewfadeIn').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
    if (isInView) {
      $(this).stop().addClass('fadeIn');
      } else {
      $(this).stop().removeClass('fadeIn');
      }
    }
  );
  // 上へスライド
  $('.inviewUp').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
    if (isInView) {
      $(this).stop().addClass('Up');
      } else {
      $(this).stop().removeClass('Up');
      }
    }
  );
  // ズームイン
  $('.inviewzoomIn').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
    if (isInView) {
      $(this).stop().addClass('zoomIn');
      } else {
      $(this).stop().removeClass('zoomIn');
      }
    }
  );
  // フェードインしながら上へスライド     
  $('.inviewfadeInUp').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
    if (isInView) {
      $(this).stop().addClass('fadeInUp');
      } else {
      $(this).stop().removeClass('fadeInUp');
      }
    }
  );
  // 回転
  $('.inviewkaiten').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
    if (isInView) {
      $(this).stop().addClass('kaiten');
      } else {
      $(this).stop().removeClass('kaiten');
      }
    }
  );
  // ズーム+回転
  $('.inviewzoomkaiten').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
    if (isInView) {
      $(this).stop().addClass('zoomkaiten');
      } else {
      $(this).stop().removeClass('zoomkaiten');
      }
    }
  );
  // 左から
  $('.inviewLeft').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
    if (isInView) {
      $(this).stop().addClass('left');
    } else {
      $(this).stop().removeClass('left');
    }
  });
});