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

複数の動きをコントロール

Animate.cssをダウンロード

Animate.css公式サイト

Animate.cssダウンロード

jquery

//表示されたら動く

$(document).ready(function() {
  var offset = 100; // 共通のオフセット値

  $(window).on("scroll", function() {
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();

    // アニメーション対象とクラスをまとめた配列
    var animations = [
      {selector: ".fadeInUp1", class: "animate__fadeInUp"},
      {selector: ".bounceInLeft1", class: "animate__bounceInLeft"},
      {selector: ".bounceInRight1", class: "animate__bounceInRight"},
      {selector: ".zoomInLeft1", class: "animate__zoomInLeft"},
      {selector: ".zoomIn1", class: "animate__zoomIn"},
      {selector: ".rotateInUpRight1", class: "animate__rotateInUpRight"},
    ];

    animations.forEach(function(anim) {
      $(anim.selector).each(function() {
        var blockPosition = $(this).offset().top;
        if (scroll > blockPosition - windowHeight + offset) {
          $(this).addClass("animate__animated " + anim.class);
        }
      });
    });

  }).trigger("scroll"); // 初回ロード時にも適用
});

HTML

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

cssでフェードを表現

.fadeInUp1 {
  opacity: 0;
}
.animate__fadeInUp {
  opacity: 1;
}

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

safariでは次を追加

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

古いやり方

jquery

//表示されたら動く
$(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"); // 初回ロード時にも適用
});

css

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

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