-
Notifications
You must be signed in to change notification settings - Fork 0
/
lux.min.js
6 lines (6 loc) · 2.05 KB
/
lux.min.js
1
2
3
4
5
6
/*!
* lux.js v0.0.3 (https://yuta.kmusiclife.com/)
* Copyright 2023 Yuta Konishi
* Licensed under Apache2.0
*/
const lux_body_bg=document.querySelector(".lux-body-bg");let luxs=[],lux_fades=[];document.querySelectorAll(".lux-fade").forEach(t=>{lux_fades.push(t)}),lux_body_bg&&(lux_body_bg.style.top=0,lux_body_bg.style.left="-25vw",lux_body_bg.style.zIndex="-5",lux_body_bg.style.width="150vw",lux_body_bg.style.height="150vh",lux_body_bg.style.backgroundSize="cover",lux_body_bg.style.backgroundPosition="center",lux_body_bg.style.position="fixed"),document.querySelectorAll(".lux").forEach(t=>{var e=t.querySelector(".lux-bg"),l=t.getAttribute("data-height"),o=t.getAttribute("data-direction");t.style.position="relative",t.style.overflowX="hidden",t.style.overflowY="hidden",t.style.height=l||"100vh",t.style.width="100vw",e.style.position="absolute",e.style.width="150vw",e.style.height="150vh",e.style.backgroundSize="cover",e.style.zIndex="-5",e.style.backgroundPosition="center","right"==o&&(e.style.right="-25vw"),"left"==o&&(e.style.left="-25vw"),"top"==o&&(e.style.top="-25vh"),"bottom"==o&&(e.style.bottom="-25vh"),luxs.push(t)}),window.addEventListener("scroll",function(t){let e=window.pageYOffset;if(lux_fades.forEach(t=>{let e=t.getBoundingClientRect();if(window.innerHeight-e.top>0&&.8*window.innerHeight-e.bottom<0){let l=window.innerHeight-e.top-(window.innerHeight-e.bottom)+.2*window.innerHeight,o=window.innerHeight-e.top;t.style.opacity=o/l}else t.style.opacity=1}),luxs.forEach(t=>{var l=t.querySelector(".lux-bg"),o=t.getAttribute("data-direction");if(e+window.innerHeight>=t.offsetTop&&e<=t.offsetTop+t.clientHeight){var i=(e+window.innerHeight-t.offsetTop)/(t.clientHeight+window.innerHeight)*50;"left"==o&&(l.style.left="-"+i+"vw"),"right"==o&&(l.style.right="-"+i+"vw"),"top"==o&&(l.style.top="-"+i+"vh"),"bottom"==o&&(l.style.bottom="-"+i+"vh")}}),lux_body_bg){var l=lux_body_bg.clientHeight-document.documentElement.clientHeight,o=e/(document.documentElement.scrollHeight-document.documentElement.clientHeight)*l;lux_body_bg.style.top="-"+o+"px"}},{passive:!0});