admin/avrahamsociety
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fancies

Browse Source
This commit is contained in:
Lazy Hippopotamus
2023-06-10 14:58:25 -04:00
parent 2097b5d597
commit d539e73f9a
4 changed files with 145 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
index.html
View File

@@ -7,8 +7,8 @@
<title>Jhewit | Home</title>
<link rel="stylesheet" href="main.css" />
</head>
<body><!--
<div id="sider">
<body>
<!--<div id="sider">
<h2>Sidebar</h2>
<div id="sider-cats">
<input type="checkbox" id="i_1" class="hidden" />
@@ -27,12 +27,12 @@
</div>-->
<div id="outer">
<div id="header">
<div id="head-marker" class="scrolly"></div>
<div id="head-marker" class=""></div>
<div id="headin">
<h1>Jhewit</h1>
<h1>Jhewit</h1><!--
<div id="links">
<div class="dropdown">
Dropdown 1
INFORMATION
</div>
<div>
<div class="dropdown-inner">
@@ -47,37 +47,22 @@
</a>
</div>
</div>
<div class="dropdown">
Dropdown 2
</div>
<div>
<div class="dropdown-inner">
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
</div>
</div>
<div class="dropdown">
Dropdown 3
</div>
<div>
<div class="dropdown-inner">
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
</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 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>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #5</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #6</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #7</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #8</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #9</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #10</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #11</div>
<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>

65
main.css
View File

@@ -40,6 +40,7 @@ h1 {
background-image: url(https://www.state.gov/wp-content/uploads/2022/02/Kuwait-2323x1406.png);
background-attachment: fixed;
background-size: cover;
position: relative;
/*clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 30% 100%, 0% 90%);*/
}
@@ -59,6 +60,12 @@ h1 {
box-sizing: border-box;
}
body {
/*display: grid;
grid-template-columns: var(--sidebar-size) auto;
grid-template-columns: var(--sidebar-size) auto;*/
}
.dropdown {
background-color: aliceblue;
padding: 10px;
@@ -91,6 +98,7 @@ h1 {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
@@ -106,13 +114,14 @@ h1 {
transition: background-color 0.3s, color 0.3s;
top: 0px;
left: 0px;
color: lightgreen;
/*margin-left: var(--sidebar-size);*/
width: calc(100vw); /*- var(--sidebar-size)*/
color: red;
/*margin-left: var(--sidebar-size);
width: calc(100vw - var(--sidebar-size));*/
width: 100vw;
}
#head-marker.scrolly-out + #headin > #links > * > *, #head-marker.scrolly-out + #headin > #links > * {
background-color: black;
/*background-color: black;*/
}
#outer {
@@ -177,4 +186,52 @@ a:hover {
#headin {
flex-direction: column;
}
}
#carousel-inner > div {
width: max(15vw, 15vh);
height: max(15vw, 15vh);
background-size: cover;
background-position: center;
padding: max(2vw, 2vh);
box-sizing: border-box;
border-radius: 30px;
display: inline-block;
margin-left: 2%;
margin-right: 2%;
}
#carousel-outer {
--do-scroll: yes;
padding: 20px;
width: 100%;
box-sizing: border-box;
background-color: rgba(255, 125, 125, 0.8);
}
#carousel-outer:hover {
--do-scroll: no;
}
/* Hide scrollbar for Chrome, Safari and Opera */
#carousel-inner::-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;
overflow-x: scroll;
}
h1 {
margin: 0 !important;
padding: 0 !important;
}

45
main.js
View File

@@ -39,8 +39,9 @@ const scrollchecks = () => {
}
});
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("#headin > h1").style.fontSize = 0 + 6 * (1 - perc) + "em";
//document.querySelector("#links").style.opacity = perc;
//document.querySelector("#carousel").style.opacity = perc;
};
window.addEventListener("scroll", scrollchecks);
window.addEventListener("scrollend", scrollchecks);
@@ -48,4 +49,42 @@ 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.
setInterval(scrollchecks, 250); // Computers are fast and scrolling in JavaScript is dumb. Shoot me.
function main() {
requestAnimationFrame(main);
var el = document.getElementById("carousel-inner");
if (getComputedStyle(el).getPropertyValue("--do-scroll") == "yes") {
el.scrollBy({
left: 10,
top: 0,
behavior: "smooth"
});
}
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"
});
}
if (el.scrollLeft < el.children[0].getBoundingClientRect().width * 3) {
var hammer = el.lastChild;
el.removeChild(hammer);
let smol = el.scrollWidth;
el.insertBefore(hammer, el.firstChild);
hammer = el.firstChild;
el.scrollBy({
left: el.scrollWidth - smol,
top: 0,
behavior: "auto"
});
}
}
main();

57
src/template.html
View File

@@ -7,8 +7,8 @@
<title>Jhewit | Home</title>
<link rel="stylesheet" href="main.css" />
</head>
<body><!--
<div id="sider">
<body>
<!--<div id="sider">
<h2>Sidebar</h2>
<div id="sider-cats">
<input type="checkbox" id="i_1" class="hidden" />
@@ -27,12 +27,12 @@
</div>-->
<div id="outer">
<div id="header">
<div id="head-marker" class="scrolly"></div>
<div id="head-marker" class=""></div>
<div id="headin">
<h1>Jhewit</h1>
<h1>Jhewit</h1><!--
<div id="links">
<div class="dropdown">
Dropdown 1
INFORMATION
</div>
<div>
<div class="dropdown-inner">
@@ -47,37 +47,22 @@
</a>
</div>
</div>
<div class="dropdown">
Dropdown 2
</div>
<div>
<div class="dropdown-inner">
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
</div>
</div>
<div class="dropdown">
Dropdown 3
</div>
<div>
<div class="dropdown-inner">
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
</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 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>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #5</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #6</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #7</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #8</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #9</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #10</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #11</div>
<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>