アトリエロワ

スクロールして現れたらアニメーション（フェード等）開始jquery

webサイトを下にスクロールして、現れたらアニメーションを開始する方法。jqueryを利用。

js

//表示されたら動く
$(document).ready(function() {
  $(window).on("scroll", function() {
    $(".fadeInUp1").each(function() {
      var scroll = $(window).scrollTop();
      var blockPosition = $(this).offset().top;
      var windowHeight = $(window).height();
      
      if (scroll > blockPosition - windowHeight + 300) {
        $(this).addClass("fadeInUp");
      }
    });
  }).trigger("scroll"); // 初回ロード時にも適用
});

Animate.cssをダウンロード

Animate.css公式サイト

Animate.cssダウンロード

HTML

<div id="point1" class="fadeInUp1">●動かしたいボックス●</div>

css

.fadeInUp1 {
  opacity: 0;
}
.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

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

safariでは次を追加

$(document).ready( function(){
// ページ読み込み時に実行したい処理
});

HOME > javascript > スクロールして現れたらアニメーション（フェード等）開始jquery

javascript

javascript

+ More