fun things

index.html

@@ -27,14 +27,23 @@
         </div>-->
         <div id="outer">
             <div id="header">
-                <div id="head-marker" class=""></div>
+                <div id="head-marker" class="scrolly"></div>
                 <div id="headin">
-                    <h1>Jhewit</h1><!--
+                    <h1>Jhewit</h1>
                     <div id="links">
+                        <div class="link">
+                            <a href="#">LINK 1</a>
+                        </div>
+                        <div></div>
                         <div class="dropdown">
-                            INFORMATION
+                            HI
                         </div>
                         <div>
+                            <div class="dropdown-inner">
+                                <a>TEST</a>
+                            </div>
+                        </div>
+                        <!--<div>
                             <div class="dropdown-inner">
                                 <a href="#">
                                     LINK
@@ -46,11 +55,14 @@
                                     LINK
                                 </a>
                             </div>
-                        </div>
                         </div>-->
-                    <div id="carousel-outer">
-                        <div id="carousel-inner">
-                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #1</div>
+                    </div>
+                </div>
+            </div>
+            <div class="carousel-outer">
+                <img src="res/arrow-left.svg" />
+                <div class="carousel" id="carousel_1">
+                    <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);" class="selected">Category #1</div>
                     <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #2</div>
                     <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #3</div>
                     <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #4</div>
@@ -64,8 +76,7 @@
                     <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #12</div>
                     <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #13</div>
                 </div>
-                    </div>
-                </div>
+                <img src="res/arrow-right.svg" />
             </div>
             <div id="content">
                 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla

main-old.js

@@ -0,0 +1,104 @@
+function clamp(min, val, max) {
+    if (val < min) {
+        val = min;
+    }
+    if (val > max) {
+        val = max;
+    }
+    return val;
+}
+
+const scrollchecks = () => {
+    var el = document.getElementById("header");
+    el.style.backgroundPositionY = 50 + (document.documentElement.scrollTop/el.scrollHeight) / 2 * 100 + "%";
+    Array.from(document.getElementsByClassName("scrolly")).forEach(el => {
+        let box = el.getBoundingClientRect();
+        if (box.bottom < 0 || box.top >= window.innerHeight) {
+            el.classList.add("scrolly-out");
+            el.classList.remove("scrolly-in");
+            el.classList.remove("scrolly-onedge");
+        }
+        else {
+            el.classList.remove("scrolly-out");
+            el.classList.add("scrolly-in");
+            el.classList.add("scrolly-entered");
+            if (box.top <= 0 || box.bottom >= window.innerHeight) {
+                el.classList.add("scrolly-onedge");
+            }
+            else {
+                el.classList.remove("scrolly-onedge");
+            }
+        }
+        if (box.top + box.height / 2 <= window.innerHeight / 2) {
+            el.classList.add("scrolly-tophalf");
+            el.classList.remove("scrolly-bottomhalf");
+        }
+        else {
+            el.classList.remove("scrolly-tophalf");
+            el.classList.add("scrolly-bottomhalf");
+        }
+    });
+    var perc = clamp(0, document.getElementById("outer").scrollTop / (window.innerHeight / 2), 1);
+    document.querySelector("#headin > h1").style.fontSize = 2 + 4 * (1 - perc) + "em";
+    document.querySelector("#links").style.opacity = perc;
+    //document.querySelector("#carousel").style.opacity = perc;
+};
+window.addEventListener("scroll", scrollchecks);
+window.addEventListener("scrollend", scrollchecks);
+window.addEventListener("wheel", scrollchecks);
+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" && !oldTouch) {
+        GALLERYSPEED = -100;
+    }
+    else {
+        GALLERYSPEED *= Math.pow(0.1, elapsed_time / 1000)
+    }
+    gallery_position += GALLERYSPEED * elapsed_time / 1000;
+    if (gallery_position > 0) {
+        var hammer = el.lastChild;
+        el.removeChild(hammer);
+        var smol = el.scrollWidth;
+        el.insertBefore(hammer, el.firstChild);
+        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();

main.css

@@ -66,7 +66,7 @@ body {
     grid-template-columns: var(--sidebar-size) auto;*/
 }
 
-.dropdown {
+.dropdown, .link {
     background-color: aliceblue;
     padding: 10px;
     display: inline-block;
@@ -98,7 +98,8 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    flex-direction: column;
+    padding-top: 2%;
+    z-index: 10000000;
 }
 
 h1 {
@@ -114,7 +115,7 @@ h1 {
     transition: background-color 0.3s, color 0.3s;
     top: 0px;
     left: 0px;
-    color: red;
+    /*color: red;*/
     /*margin-left: var(--sidebar-size);
     width: calc(100vw - var(--sidebar-size));*/
     width: 100vw;
@@ -188,9 +189,10 @@ a:hover {
     }
 }
 
-#carousel-inner > div {
-    width: max(15vw, 15vh);
-    height: max(15vw, 15vh);
+.carousel > div {
+    min-width: max(15vw, 15vh);
+    min-height: max(15vw, 15vh);
+    transition: min-height 1s, min-width 1s;
     background-size: cover;
     background-position: center;
     padding: max(2vw, 2vh);
@@ -199,39 +201,69 @@ a:hover {
     display: inline-block;
     margin-left: 2%;
     margin-right: 2%;
+    opacity: 50%;
 }
 
-#carousel-outer {
-    --do-scroll: yes;
-    padding: 20px;
-    width: 100%;
-    box-sizing: border-box;
-    background-color: rgba(255, 125, 125, 0.8);
-    overflow-x: hidden;
+.carousel > div:first-child {
+    margin-left: 50vw;
 }
 
-#carousel-outer:hover {
-    --do-scroll: no;
+.carousel > div:last-child {
+    margin-right: 50vw;
 }
 
- /* Hide scrollbar for Chrome, Safari and Opera */
-#carousel-inner::-webkit-scrollbar {
+.carousel > div.selected {
+    min-width: max(20vw, 20vh);
+    min-height: max(20vw, 20vh);
+    opacity: 100%;
+}
+
+.carousel::-webkit-scrollbar {
     display: none;
 }
 
- /* Hide scrollbar for IE, Edge and Firefox */
-#carousel-inner {
-    -ms-overflow-style: none;
-     /* IE and Edge */
-    scrollbar-width: none;
-     /* Firefox */
-}
-
-#carousel-inner {
-    white-space: nowrap;
+.carousel {
+    /*-ms-overflow-style: none;
+    scrollbar-width: none;*/
+    display: flex;
+    align-items: center;
+    width: max-content;
+    padding: 1%;
+    overflow: hidden;
+    box-sizing: border-box;
+    min-height: max(22vw, 22vh);
 }
 
 h1 {
     margin: 0 !important;
     padding: 0 !important;
 }
+
+.carousel-outer {
+    margin-top: clamp(50px, 10vh, 100px);
+    width: 100vw;
+    display: flex;
+    background-color: black;
+    align-items: center;
+    position: relative;
+}
+
+.carousel-outer > img {
+    z-index: 1000;
+    position: absolute;
+    transition: height 1s;
+    height: 50%;
+    cursor: pointer;
+}
+
+.carousel-outer > img:hover {
+    height: 75%;
+}
+
+.carousel-outer > img:first-child {
+    left: 2vw;
+}
+
+.carousel-outer > img:last-child {
+    right: 2vw;
+}

main.js

@@ -39,8 +39,8 @@ const scrollchecks = () => {
         }
     });
     var perc = clamp(0, document.getElementById("outer").scrollTop / (window.innerHeight / 2), 1);
-    document.querySelector("#headin > h1").style.fontSize = 0 + 6 * (1 - perc) + "em";
-    //document.querySelector("#links").style.opacity = perc;
+    document.querySelector("#headin > h1").style.fontSize = 2 + 4 * (1 - perc) + "em";
+    document.querySelector("#links").style.opacity = perc;
     //document.querySelector("#carousel").style.opacity = perc;
 };
 window.addEventListener("scroll", scrollchecks);
@@ -50,55 +50,64 @@ 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;
+function getCarousel(id) {
+    var carousEL = document.querySelector(".carousel#" + id);
+    var carousel = {
+        element: carousEL,
+        delCalls: 0,
+        selected() {
+            return carousel.element.querySelector(".selected");
+        },
+        next(domarkate) {
+            var sel = carousel.selected();
+            sel.classList.remove("selected");
+            var newSel = sel.nextElementSibling;
+            if (!newSel) {
+                newSel = carousel.element.firstElementChild;
             }
-    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" && !oldTouch) {
-        GALLERYSPEED = -100;
+            newSel.classList.add("selected");
+            carousel.display();
+            if (domarkate != true) {
+                carousel.delCalls = 3;
+            }
+        },
+        nextAnim() {
+            if (carousel.delCalls == 0) {
+                carousel.next(true);
             }
             else {
-        GALLERYSPEED *= Math.pow(0.1, elapsed_time / 1000)
+                carousel.delCalls--;
             }
-    gallery_position += GALLERYSPEED * elapsed_time / 1000;
-    if (gallery_position > 0) {
-        var hammer = el.lastChild;
-        el.removeChild(hammer);
-        var smol = el.scrollWidth;
-        el.insertBefore(hammer, el.firstChild);
-        gallery_position -= (el.scrollWidth - smol);
+        },
+        back(domarkate) {
+            var sel = carousel.selected();
+            sel.classList.remove("selected");
+            var newSel = sel.previousElementSibling;
+            if (!newSel) {
+                newSel = carousel.element.lastElementChild;
             }
-    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);
+            newSel.classList.add("selected");
+            carousel.display();
+            if (domarkate != true) {
+                carousel.delCalls = 3;
             }
-    el.style.transform = "translate(" + gallery_position + "px, 0)";
+        },
+        display() {
+            var bbox = carousel.selected().getBoundingClientRect();
+            carousel.element.scrollBy({
+                left: (bbox.left - window.innerWidth/2 + bbox.width/2),
+                top: 0,
+                behavior: "smooth"
+            });
+        }
+    }
+    carousEL.previousElementSibling.onclick = carousel.back;
+    carousEL.nextElementSibling.onclick = carousel.next;
+    return carousel;
 }
 
-main();
+var carousel_1 = getCarousel("carousel_1");
+carousel_1.display();
+
+setInterval(carousel_1.nextAnim, 2000);

res/arrow-left.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="67.722931mm"
+   height="248.83067mm"
+   viewBox="0 0 67.722931 248.83067"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="arrow-left.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.37721168"
+     inkscape:cx="165.68946"
+     inkscape:cy="532.8573"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0.23499242,-0.29279519)">
+    <path
+       id="path627"
+       style="fill:none;stroke:white;stroke-width:2.423;stop-color:#000000"
+       d="m 12.891763,74.516068 v -5.12e-4" />
+    <path
+       id="path625"
+       style="fill:none;stroke:white;stroke-width:2.423;stop-color:#000000"
+       d="M 66.415659,248.55925 1.2877685,124.70778 66.415471,0.85665987" />
+  </g>
+</svg>

res/arrow-right.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="67.722931mm"
+   height="248.83067mm"
+   viewBox="0 0 67.722931 248.83067"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="arrow-right.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.37721168"
+     inkscape:cx="165.68946"
+     inkscape:cy="532.8573"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0.23499242,-0.29279519)">
+    <path
+       id="path627"
+       style="fill:none;stroke:white;stroke-width:2.423;stop-color:#000000"
+       d="m 12.891763,74.516068 v -5.12e-4" />
+    <path
+       id="path625"
+       style="fill:none;stroke:white;stroke-width:2.423;stop-color:#000000"
+       d="M 0.99125754,248.55925 66.119148,124.70778 0.99144554,0.85665987" />
+  </g>
+</svg>

src/template.html

@@ -27,14 +27,23 @@
         </div>-->
         <div id="outer">
             <div id="header">
-                <div id="head-marker" class=""></div>
+                <div id="head-marker" class="scrolly"></div>
                 <div id="headin">
-                    <h1>Jhewit</h1><!--
+                    <h1>Jhewit</h1>
                     <div id="links">
+                        <div class="link">
+                            <a href="#">LINK 1</a>
+                        </div>
+                        <div></div>
                         <div class="dropdown">
-                            INFORMATION
+                            HI
                         </div>
                         <div>
+                            <div class="dropdown-inner">
+                                <a>TEST</a>
+                            </div>
+                        </div>
+                        <!--<div>
                             <div class="dropdown-inner">
                                 <a href="#">
                                     LINK
@@ -46,11 +55,14 @@
                                     LINK
                                 </a>
                             </div>
-                        </div>
                         </div>-->
-                    <div id="carousel-outer">
-                        <div id="carousel-inner">
-                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #1</div>
+                    </div>
+                </div>
+            </div>
+            <div class="carousel-outer">
+                <img src="res/arrow-left.svg" />
+                <div class="carousel" id="carousel_1">
+                    <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);" class="selected">Category #1</div>
                     <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #2</div>
                     <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #3</div>
                     <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #4</div>
@@ -64,8 +76,7 @@
                     <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #12</div>
                     <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #13</div>
                 </div>
-                    </div>
-                </div>
+                <img src="res/arrow-right.svg" />
             </div>
             <div id="content">
                 {content}