swaous.asuscomm.com/site/scrolly.js

const scrolly={$(classname){return Array.from(document.getElementsByClassName(classname))},getProperties(element){var r={marginBottom:0,marginTop:0,marginLeft:0,marginRight:0};if(element.hasAttribute("data-scrolly-margin")){r.marginBottom=element.getAttribute("data-scrolly-margin")-0;r.marginTop=r.marginBottom;r.marginLeft=r.marginTop;r.marginRight=r.marginLeft}if(element.hasAttribute("data-scrolly-margin-top")){r.marginTop=element.getAttribute("data-scrolly-margin-top")-0}if(element.hasAttribute("data-scrolly-margin-left")){r.marginLeft=element.getAttribute("data-scrolly-margin-left")-0}if(element.hasAttribute("data-scrolly-margin-right")){r.marginRight=element.getAttribute("data-scrolly-margin-right")-0}if(element.hasAttribute("data-scrolly-margin-bottom")){r.marginBottom=element.getAttribute("data-scrolly-margin-bottom")-0}return r},findScrollParent(element){if(element.parentNode==document.body){return window}if(element.parentNode.scrollHeight>element.parentNode.clientHeight&&window.getComputedStyle(element.parentNode).overflowY.indexOf("hidden")==-1){return element.parentNode}return this.findScrollParent(element.parentNode)},scroll(element){var rect=element.getBoundingClientRect();var prop=scrolly.getProperties(element);if(rect.bottom>=prop.marginTop&&rect.top<=window.innerHeight-prop.marginBottom&&rect.right>=prop.marginLeft&&rect.left<=window.innerWidth-prop.marginRight){element.classList.add("scrolly-active");element.classList.add("scrolly-visible")}else{element.classList.remove("scrolly-visible")}if(rect.top>=0&&rect.bottom<=window.innerHeight&&rect.left>=0&&rect.right<=window.innerWidth){element.classList.add("scrolly-in")}else{element.classList.remove("scrolly-in")}},init(){this.viewEvts=this.$("scrolly");for(let el of this.viewEvts){this.findScrollParent(el).addEventListener("scroll",()=>{this.scroll(el)});this.scroll(el)}this.boxEvts=this.$("scrolly-box");this.trackEvts=this.$("scrolly-track");this.mouseEvts=this.$("scrolly-mouse");const resizer=new ResizeObserver(evts=>{for(let event of evts){let rect=event.target.getBoundingClientRect();event.target.style.setProperty("--scrolly-width",event.contentRect.width);event.target.style.setProperty("--scrolly-height",event.contentRect.height);event.target.style.setProperty("--scrolly-left",rect.left);event.target.style.setProperty("--scrolly-top",rect.top)}});this.boxEvts.forEach(el=>{resizer.observe(el);this.findScrollParent(el).addEventListener("scroll",()=>{var rect=el.getBoundingClientRect();el.style.setProperty("--scrolly-left",rect.left);el.style.setProperty("--scrolly-top",rect.top)})});this.trackEvts.forEach(el=>{el.addEventListener("scroll",()=>{el.style.setProperty("--scrolly-scroll-top",el.scrollTop);el.style.setProperty("--scrolly-scroll-left",el.scrollLeft)});el.style.setProperty("--scrolly-scroll-height",el.scrollHeight);const robbler=new ResizeObserver(()=>{el.style.setProperty("--scrolly-scroll-height",el.scrollHeight)});for(let child of el.children){robbler.observe(child)}const observerOptions={childList:true,subtree:false};const mutation=new MutationObserver((events,observer)=>{el.style.setProperty("--scrolly-scroll-height",el.scrollHeight);for(let event of events){for(let added of event.addedNodes){robbler.observe(added)}for(let removed of event.removedNodes){robbler.unobserve(removed)}}});mutation.observe(el,observerOptions)});this.mouseEvts.forEach(el=>{el.addEventListener("pointermove",evt=>{var rect=el.getBoundingClientRect();el.style.setProperty("--mouse-x",rect.left+evt.clientX);el.style.setProperty("--mouse-y",-rect.top+evt.clientY)})})}};if(!window["SCROLLY_DELAYEDINIT"]){window.addEventListener("load",()=>{scrolly.init()})}