脱jQuery!スクロールアニメーション!
| JavaScript、脱jQueryいま、動くサイト多いっすよねー。
スクロールアニメーションのプラグインはいっぱいあるけど
これまた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」とかを使ってもいいかもしれないですね。
まぁ、僕は外のものを使うと融通がきかないので、使わないですけどねー。