diff options
| -rw-r--r-- | script.js | 24 |
1 files changed, 5 insertions, 19 deletions
@@ -1,26 +1,23 @@ -const THRESHOLD_FIDELITY = 1000; +const THRESHOLD_FIDELITY = 150 ; // mutation observer for the video element const videoTitle = document.querySelector('#video-title'); -console.log(videoTitle); -const pastryIframe = document.querySelector('#connie-pastries') -console.log(pastryIframe.textContent); +// const pastryIframe = document.querySelector('#connie-pastries') const observer = new IntersectionObserver(entries => { // note - if the boundingClientRect.y is negative, then they are scrolling down // note - since using id, only 1 entry - const {intersectionRatio, boundingClientRect} = entries[0]; - console.log(entries[0]) - if (intersectionRatio !== 1 ) { + const {intersectionRatio} = entries[0]; + if (intersectionRatio !== 1) { videoTitle.currentTime = 5 - 3 * intersectionRatio; } else { videoTitle.currentTime = 2; } }, { threshold: [...Array(THRESHOLD_FIDELITY).keys()].map(num => num/THRESHOLD_FIDELITY), - rootMargin: '-125px 0px 0px 0px' + rootMargin: '-100px 0px 0px 0px' }); // after two seconds pause the video @@ -30,17 +27,6 @@ setTimeout(() => { observer.observe(videoTitle); }, 2500) -// // math for interactive conic border on weekly specials -// const conicElement = document.querySelector('.conic-border'); -// window.addEventListener('mousemove', ({ clientX, clientY }) => { -// const { x, y, width, height } = conicElement.getBoundingClientRect(); -// const dx = clientX - (x + 0.5 * width); -// const dy = clientY - (y + 0.5 * height); -// const angle = Math.atan2(dy, dx) * 180 / Math.PI; -// -// conicElement.style.setProperty('--startDeg', `${angle + 90}deg`); -// }, false); - // borrowed from https://www.w3schools.com/howto/howto_js_collapse_sidepanel.asp /* Set the width of the sidebar to 250px (show it) */ openNav = () => { |