cssアニメーションを使用して、画面スクロールでぬるっと出現するコンテンツを作成

※jqueryが必要 

■js

//画面のロード、タブレットの縦横切り替えで動く

$(window).on("load orientationchange resize", function() {

  scroll_effect();

  scroll_effect2();

  //画面のスクロール、タッチによるスクロールで動く

  $(window).on("scroll touchmove", function(){

    scroll_effect();

    scroll_effect2();

  });

  //フェードイン

  function scroll_effect(){

    $('.fadein').each(function(){

      var elemPos = $(this).offset().top;

      var scroll = $(window).scrollTop();

      var windowHeight = $(window).height();

      if (scroll > elemPos - windowHeight){

        $(this).addClass('scrollin');

      }

    });

  }

  //スライドイン

  function scroll_effect2(){

    $('.slidein').each(function(){

      var elemPos = $(this).offset().top;

      var scroll = $(window).scrollTop();

      var windowHeight = $(window).height();

      if (scroll > elemPos - windowHeight){

        $(this).addClass('scrollin');

      }

    });

  }

});

■css

/*アニメーション*/

.anim-box.zoomin.is-animated {

  animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;

}

@keyframes zoomIn {

  0% {

    transform: scale(0.8);

    opacity: 0;

  }

  100% {

    opacity: 1;

    transform: scale(1);

  }

}

/*コンテンツスライドイン右から左*/

/* 画面外にいる状態 */

.slidein {

opacity : 0.1;

transform : translateX(180px);

transition : all 500ms;

}

/* 画面内に入った状態 */

.slidein.scrollin {

opacity : 1;

transform : translateX(0);

}

/*コンテンツフェードイン*/

/* 画面外にいる状態 */

.fadein {

opacity : 0.1;

transform : translate(0, 50px);

transition : all 500ms;

}

/* 画面内に入った状態 */

.fadein.scrollin {

opacity : 1;

transform : translate(0, 0);

}

■html

<div class="slidein">

</div>

<div class="fadein">

</div>