可視範囲を判定してアニメーションを実行するクラス – 『TweenMax』

オブジェクトが可視範囲にきたらアニメーションを発火して、スクロール量に応じたアニメーションを実行する。


const anim = (target, value) => { TweenMax.to(target, .5, { y: value, }); }; class scrollPosition { constructor(targets, callbackIn) { this.targets = [...document.querySelectorAll(targets)]; this.windowH = window.innerHeight; this.scrollY = 0; this.offsetTop = []; this.height = []; this.show = []; this.value = []; this.offset = 100; this.callbackIn = typeof callbackIn === 'function' ? callbackIn : () => {}; this.getItem(); this.init(); return this; } init() { window.addEventListener('scroll', () => { this.scrollY = window.pageYOffset; this.check(); }); this.check(); } getItem() { this.targets.forEach((el, i) => { let rect = el.getBoundingClientRect(); this.offsetTop[i] = rect.top; this.height[i] = el.offsetHeight; }); } check() { this.targets.forEach((el, i) => { this.show[i] = (this.scrollY + this.windowH > this.offsetTop[i] + this.offset) && (this.scrollY < this.offsetTop[i] - this.offset + this.height[i]); this.value[i] = this.scrollY + this.windowH - this.offsetTop[i] - this.offset; if (this.show[i]) { el.classList.add('is-show'); this.callbackIn.call(this, el, i); } else { el.classList.remove('is-show'); } }); } } const box = new scrollPosition('.box', function(el, i) { let amount = 100; let value = this.value[i] / this.windowH * amount * -1; if (this.show[i]) { anim(el.querySelector('.inner'), value); } });

share

related