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
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
diff --git a/main-old.js b/main-old.js
new file mode 100644
index 0000000..7a057ab
--- /dev/null
+++ b/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();
\ No newline at end of file
diff --git a/main.css b/main.css
index 314a502..82be0e0 100644
--- a/main.css
+++ b/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;
}
\ No newline at end of file
diff --git a/main.js b/main.js
index 57991e8..d640033 100644
--- a/main.js
+++ b/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;
+ }
+ newSel.classList.add("selected");
+ carousel.display();
+ if (domarkate != true) {
+ carousel.delCalls = 3;
+ }
+ },
+ nextAnim() {
+ if (carousel.delCalls == 0) {
+ carousel.next(true);
+ }
+ else {
+ carousel.delCalls--;
+ }
+ },
+ back(domarkate) {
+ var sel = carousel.selected();
+ sel.classList.remove("selected");
+ var newSel = sel.previousElementSibling;
+ if (!newSel) {
+ newSel = carousel.element.lastElementChild;
+ }
+ newSel.classList.add("selected");
+ carousel.display();
+ if (domarkate != true) {
+ carousel.delCalls = 3;
+ }
+ },
+ display() {
+ var bbox = carousel.selected().getBoundingClientRect();
+ carousel.element.scrollBy({
+ left: (bbox.left - window.innerWidth/2 + bbox.width/2),
+ top: 0,
+ behavior: "smooth"
+ });
+ }
}
- 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)";
+ carousEL.previousElementSibling.onclick = carousel.back;
+ carousEL.nextElementSibling.onclick = carousel.next;
+ return carousel;
}
-main();
\ No newline at end of file
+var carousel_1 = getCarousel("carousel_1");
+carousel_1.display();
+
+setInterval(carousel_1.nextAnim, 2000);
\ No newline at end of file
diff --git a/res/arrow-left.svg b/res/arrow-left.svg
new file mode 100644
index 0000000..6e4ed0c
--- /dev/null
+++ b/res/arrow-left.svg
@@ -0,0 +1,52 @@
+
+
+
+
diff --git a/res/arrow-right.svg b/res/arrow-right.svg
new file mode 100644
index 0000000..a0c25e0
--- /dev/null
+++ b/res/arrow-right.svg
@@ -0,0 +1,52 @@
+
+
+
+
diff --git a/src/template.html b/src/template.html
index 1f846ba..c94171b 100644
--- a/src/template.html
+++ b/src/template.html
@@ -27,14 +27,23 @@
+ 
+