BLOG

脱jQuery!スクロールアニメーション!

| JavaScript

いま、動くサイト多いっすよねー。
スクロールアニメーションのプラグインはいっぱいあるけど
これまたjQuery使ってるの多そう。。。
ってことで、脱jQueryってことでこんなの書いてみました!

const animets = document.querySelectorAll('.is-animation');
window.addEventListener('scroll',function() {
  let screenH = document.documentElement.clientHeight;
  animets.forEach(function(elm){
    let elmH = elm.getBoundingClientRect().top - screenH + 100;

    if(elmH < 0) elm.classList.add('is-animated');
    else elm.classList.remove('is-animated');
  }
});

「.is-animation」のクラスがついてる要素が
画面下方から100pxぐらい見えたところで
「.is-animated」のクラスが追加されます。
一応、下方100pxより下にいけば「.is-animated」は消えるようになってます。
ってことで、CSSは今回はズームイン的なイメージです。

.zoomIn{
  transform: scale(.8);
  opacity: 0;
  transition: all .4s;
}
.zoomIn.is-animated{
  transform: scale(1);
  opacity: 1;
}

CSSはこういう感じですね。
まぁ、CSSは好きなようにあてがってください。
「Animate.css」とかを使ってもいいかもしれないですね。
まぁ、僕は外のものを使うと融通がきかないので、使わないですけどねー。

PAGE TOP