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でIDから本文を取得する

[PHP] 配列内の空白を削除「array_filter」「array_diff」

[PHP] 配列内の同じ値をまとめる「array_unique」

WordPressのカスタムフィールドでソートする

連想配列から特定の値を取得して配列にいれちゃうってやつ

JavaScriptで取得するGETの値

【CSS】text-decorationのカスタマイズができるの知ってた?

CSSでフッターの下に隙間ができないように調整する

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

CATEGORY

POPULAR POSTS

PAGE TOP