diff options
author | Michael Foiani <sotech117@michaels-mbp-21.devices.brown.edu> | 2022-09-06 20:28:15 -0400 |
---|---|---|
committer | Michael Foiani <sotech117@michaels-mbp-21.devices.brown.edu> | 2022-09-06 20:28:15 -0400 |
commit | 67d31021543c502c4175133eab558642a0f30512 (patch) | |
tree | ecfa2a6185f6a4c9966b094215f231a89ab0ec22 /script.js | |
parent | db96a28be71373866a969af160b82b1db65d5f3c (diff) | |
parent | 605708bd668434ec0c3d858c454fa8f6df466838 (diff) |
Merge branch 'particles'
updating to the master branch
Diffstat (limited to 'script.js')
-rw-r--r-- | script.js | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/script.js b/script.js new file mode 100644 index 0000000..4178c93 --- /dev/null +++ b/script.js @@ -0,0 +1,39 @@ +const THRESHOLD_FIDELITY = 150 ; + +// mutation observer for the video element +const videoTitle = document.querySelector('#video-title'); + +// 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} = 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: '-100px 0px 0px 0px' +}); + +// after two seconds pause the video +setTimeout(() => { + videoTitle.pause(); + videoTitle.currentTime = 2; + observer.observe(videoTitle); +}, 2500) + +// borrowed from https://www.w3schools.com/howto/howto_js_collapse_sidepanel.asp +/* Set the width of the sidebar to 250px (show it) */ +openNav = () => { + document.querySelector('#sidepanel').style.width = "250px"; +} + +/* Set the width of the sidebar to 0 (hide it) */ +closeNav = () => { + document.querySelector('#sidepanel').style.width = "0"; +}
\ No newline at end of file |