アトリエロワ

スクロールして現れたらアニメーション開始jquery

js

//表示されたら動く
$(function() {
  $(window).scroll(function() {
    $(".fadeInUp1").each(function() {
      var scroll = $(window).scrollTop();
      var blockPosition = $(this).offset().top;
      var windowHeihgt = $(window).height();
      if (scroll > blockPosition - windowHeihgt + 300) {
        $(this).addClass("fadeInUp");
      }
    });
  });
});

Animate.cssをダウンロード

Animate.css公式サイト

Animate.cssダウンロード

HTML

<div id="point1" class="fadeInUp1">●動かしたいボックス●</div>
<h3>css</h3>
.fadeInUp1 {
  opacity: 0;
}
.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

//アニメーション開始の時間を調整
#point1 {
  animation-delay: 0.5s;
}

HOME > javascript > スクロールして現れたらアニメーション開始jquery