jQueryとCSSを組み合わせて動かす

基本的な考え方

動くきっかけを指定するには、HTML内の「動かす要素」に「動くきっかけの起点となるクラス名」を付け、jQuery側で動くきっかけの動作（スクロールなど）したら、アニメーション用のCSSクラス名が付与されるという指定をする。

以下の例は、スクロールをしてクラス名fadeUpTriggerの位置まで来たら、fadeUpというクラス名を付与してふわっと出現されるコードである。

<!-- 「ふわっ」という動くきっかけの起点となるクラス名を「fadeUpTrigger」と付ける -->
<div class="box fadeUpTrigger"></div>
<div class="box fadeUpTrigger"></div>
.box {
  margin: 500px 0 25px;
  width: 100px;
  height: 100px;
  background: #999999;
}

/* 動くきっかけの起点となるクラス名に「透過0（opacity: 0;）」の指定 */
.fadeUpTrigger {
  opacity: 0;
}

/* jQueryで付与されたアニメーション用のCSSクラス「fadeUp」には「透過していた要素を下から出現」する指定を行う */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

/* 変化の終了時にopacty: 0;が打ち消され、opacity: 1;（不透明の状態）になる。 */
/* また、下100pxから0pxの位置へ移動して出現する */
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
function fadeAnime() { //動かすきっかけを独自のアニメーションの名前で定義
  $(".fadeUpTrigger").each(function () { //fadeUpTriggerというクラス名が
    const elemPos = $(this).offset().top - 50; //上の50pxより
    const scroll = $(window).scrollTop();
    const windowHeight = $(window).height();
    if (scroll >= elemPos - windowHeight) {
      $(this).addClass("fadeUp"); //画面内に入ったらfadeUpというクラス名を追記
    } else {
      $(this).removeClass("fadeUp"); //画面外に出たらfadeUpというクラス名を外す
    }
  });
}

//画面が読み込まれた後に動く記述
$(window).on("load", function () {
  fadeAnime();
});

//画面がスクロールされたら動く記述
$(window).on("scroll", function () {
  fadeAnime();
});
inserted by FC2 system