🌊
フェードアニメクラス(scrollイベント)
クラスをやり始めた頃に、元々あったJavaScriptをクラス化したものです。
最初の頃のコードをそのまま無修正で投げただけですので、冗長・ムダな部分やダメな部分があるかと思います。
またscrollイベントなので、パフォーマンスはあまり良くないかと思います。
用例
new FadeAnime("hoge")._init();
js-hogeクラスが付いているタグに対してu-hogeクラスを付与します
export function fadeAnime() {
//スクロールフェードアニメーション
const offsetAdjustment = 100; //調整量
const getScrollTop = () => { return document.documentElement.scrollTop || document.body.scrollTop };
class FadeAnime {
constructor(fadeType, elemOffset, scroll, windowHeight, fadeHeight) {
this.fadeType = document.querySelectorAll(`.js-${fadeType}`);
this.elemOffset = this.fadeType.forEach(elem => elem.offsetTop + offsetAdjustment);
this.scroll = getScrollTop();
this.windowHeight = window.innerHeight;
this.fadeHeight = this.elemOffset - this.windowHeight;
}
_init() {
let cls = [], cl;
this.fadeType.forEach(elem => {
elem.classList.forEach(el => {
el.indexOf("js-fade") == 0 ? cls.push(el) : "";
});
});
cls = Array.from(new Set(cls));
cls.forEach(elm => cl = elm.split("js-")[1]);
const addCls = `u-${cl}`;
const fadeTarget = this.fadeType;
function scrollAct() {
this.scroll = getScrollTop();
fadeTarget.forEach(t => {
this.fadeHeight = t.offsetTop + offsetAdjustment - window.innerHeight;
if (this.scroll >= this.fadeHeight) t.classList.add(addCls);
});
}
window.addEventListener("load", scrollAct);
window.addEventListener("scroll", scrollAct);
window.addEventListener("resize", scrollAct);
}
}
new FadeAnime("fadeIn")._init();
new FadeAnime("fadeUp")._init();
new FadeAnime("fadeRight")._init();
new FadeAnime("fadeLeft")._init();
Discussion