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」とかを使ってもいいかもしれないですね。
まぁ、僕は外のものを使うと融通がきかないので、使わないですけどねー。

RECENT POSTS

我が家の植物たち

カスタムフィールドを含む複数の条件でソートをする【WordPress】

脱jQuery!$.ajax使わない書き方

検索用のフォームを設置する【wordpress】

docker-composeをつかってWEBサーバーをたてる

カスタムフィールドを検索範囲にいれる【ACF】

WordPressに大量に投稿をインポートする【CSV】

iOSのsafariでbackground-attachmentが使えないので対策【CSSのみ】

一周回ってapple 純正メモって使いやすい

使わないとかない!flexでの間隔の設定が簡単にできるgap!

CATEGORY

POPULAR POSTS

PAGE TOP