diff --git a/main.css b/main.css index f1b1000..314a502 100644 --- a/main.css +++ b/main.css @@ -35,7 +35,7 @@ h1 { text-align: center; padding-top: 10%; padding-bottom: 10%; - min-height: 100vh; + min-height: 80vh; box-sizing: border-box; background-image: url(https://www.state.gov/wp-content/uploads/2022/02/Kuwait-2323x1406.png); background-attachment: fixed; @@ -106,7 +106,7 @@ h1 { } #head-marker { - margin-top: 20vh; + margin-top: 10vh; } #head-marker.scrolly-out + #headin { @@ -207,6 +207,7 @@ a:hover { width: 100%; box-sizing: border-box; background-color: rgba(255, 125, 125, 0.8); + overflow-x: hidden; } #carousel-outer:hover { @@ -214,21 +215,20 @@ a:hover { } /* Hide scrollbar for Chrome, Safari and Opera */ - #carousel-inner::-webkit-scrollbar { - display: none; - } +#carousel-inner::-webkit-scrollbar { + display: none; +} /* Hide scrollbar for IE, Edge and Firefox */ - #carousel-inner { - -ms-overflow-style: none; +#carousel-inner { + -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; + scrollbar-width: none; /* Firefox */ - } +} #carousel-inner { white-space: nowrap; - overflow-x: scroll; } h1 { diff --git a/main.js b/main.js index 3279922..57991e8 100644 --- a/main.js +++ b/main.js @@ -50,41 +50,55 @@ window.addEventListener("resize", scrollchecks); window.addEventListener("load", scrollchecks); window.addEventListener("touchmove", scrollchecks); setInterval(scrollchecks, 250); // Computers are fast and scrolling in JavaScript is dumb. Shoot me. +var gallery_position = 0; +var last_cycle = window.performance.now(); +var GALLERYSPEED = -100; +var oldTouch = undefined; + +document.getElementById("carousel-inner").addEventListener("wheel", (evt) => { + GALLERYSPEED = (-evt.deltaX + evt.deltaY) * 100; + evt.preventDefault(); +}); + +document.getElementById("carousel-inner").addEventListener("touchmove", (evt) => { + var tuch = evt.touches[0]; + if (oldTouch) { + GALLERYSPEED = -(oldTouch.pageX - tuch.pageX) * 100; + } + oldTouch = tuch; +}); + +document.getElementById("carousel-inner").addEventListener("touchend", () => { + oldTouch = undefined; +}); function main() { + var elapsed_time = window.performance.now() - last_cycle; + last_cycle += elapsed_time; requestAnimationFrame(main); var el = document.getElementById("carousel-inner"); - if (getComputedStyle(el).getPropertyValue("--do-scroll") == "yes") { - el.scrollBy({ - left: 10, - top: 0, - behavior: "smooth" - }); + if (getComputedStyle(el).getPropertyValue("--do-scroll") == "yes" && !oldTouch) { + GALLERYSPEED = -100; } - if (el.scrollLeft > el.scrollWidth - window.innerWidth - (el.children[0].getBoundingClientRect().width * 3)) { - var hammer = el.children[0]; - el.removeChild(hammer); - let smol = el.scrollWidth; - el.appendChild(hammer); - hammer = el.lastChild; - el.scrollBy({ - left: smol - el.scrollWidth, - top: 0, - behavior: "auto" - }); + else { + GALLERYSPEED *= Math.pow(0.1, elapsed_time / 1000) } - if (el.scrollLeft < el.children[0].getBoundingClientRect().width * 3) { + gallery_position += GALLERYSPEED * elapsed_time / 1000; + if (gallery_position > 0) { var hammer = el.lastChild; el.removeChild(hammer); - let smol = el.scrollWidth; + var smol = el.scrollWidth; el.insertBefore(hammer, el.firstChild); - hammer = el.firstChild; - el.scrollBy({ - left: el.scrollWidth - smol, - top: 0, - behavior: "auto" - }); + gallery_position -= (el.scrollWidth - smol); } + if (gallery_position < -(el.scrollWidth - window.innerWidth)) { + var hammer = el.firstChild; + el.removeChild(hammer); + var smol = el.scrollWidth; + el.appendChild(hammer); + gallery_position += (el.scrollWidth - smol); + } + el.style.transform = "translate(" + gallery_position + "px, 0)"; } main(); \ No newline at end of file