add 'moves'
This commit is contained in:
35
index.html
35
index.html
@@ -7,7 +7,7 @@
|
||||
<title>Jhewit | Home</title>
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<body><!--
|
||||
<div id="sider">
|
||||
<h2>Sidebar</h2>
|
||||
<div id="sider-cats">
|
||||
@@ -24,7 +24,7 @@
|
||||
<a href="#">Links.</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<div id="outer">
|
||||
<div id="header">
|
||||
<div id="head-marker" class="scrolly"></div>
|
||||
@@ -83,7 +83,36 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="content">
|
||||
Your mom
|
||||
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
|
||||
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
|
||||
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
|
||||
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 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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!
|
||||
</div>
|
||||
</div>
|
||||
<script src="main.js"></script>
|
||||
|
||||
39
main.css
39
main.css
@@ -35,9 +35,27 @@ h1 {
|
||||
text-align: center;
|
||||
padding-top: 10%;
|
||||
padding-bottom: 10%;
|
||||
min-height: 40vh;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background-image: url(https://www.state.gov/wp-content/uploads/2022/02/Kuwait-2323x1406.png);
|
||||
background-attachment: fixed;
|
||||
/*clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 30% 100%, 0% 90%);*/
|
||||
}
|
||||
|
||||
#header::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
clip-path: polygon(0% 90%, 0 100%, 100% 100%, 100% 90%, 30% 100%);
|
||||
background-color: white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
@@ -70,17 +88,24 @@ h1 {
|
||||
#headin {
|
||||
padding-top: 2%;
|
||||
padding-bottom: 2%;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
transition: background-color 0.3s, color 0.3s;/*
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;*/
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
#head-marker.scrolly-out + #headin {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background-color: darkred;
|
||||
background-color: slateblue;
|
||||
color: lightgreen;
|
||||
margin-left: var(--sidebar-size);
|
||||
width: calc(100vw - var(--sidebar-size));
|
||||
/*margin-left: var(--sidebar-size);*/
|
||||
width: calc(100vw); /*- var(--sidebar-size)*/
|
||||
}
|
||||
|
||||
#head-marker.scrolly-out + #headin > #links > * > *, #head-marker.scrolly-out + #headin > #links > * {
|
||||
@@ -88,8 +113,8 @@ h1 {
|
||||
}
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-size) auto;
|
||||
/*display: grid;
|
||||
grid-template-columns: var(--sidebar-size) auto;*/
|
||||
}
|
||||
|
||||
#outer {
|
||||
|
||||
16
main.js
16
main.js
@@ -1,3 +1,13 @@
|
||||
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 + "%";
|
||||
@@ -28,9 +38,13 @@ const scrollchecks = () => {
|
||||
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;
|
||||
};
|
||||
window.addEventListener("scroll", scrollchecks);
|
||||
window.addEventListener("scrollend", scrollchecks);
|
||||
window.addEventListener("wheel", scrollchecks);
|
||||
window.addEventListener("resize", scrollchecks);
|
||||
window.addEventListener("load", scrollchecks);
|
||||
window.addEventListener("load", scrollchecks);
|
||||
setInterval(scrollchecks, 250); // Computers are fast and scrolling in JavaScript is dumb. Shoot me.
|
||||
@@ -1 +1,30 @@
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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!
|
||||
@@ -7,7 +7,7 @@
|
||||
<title>Jhewit | Home</title>
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<body><!--
|
||||
<div id="sider">
|
||||
<h2>Sidebar</h2>
|
||||
<div id="sider-cats">
|
||||
@@ -24,7 +24,7 @@
|
||||
<a href="#">Links.</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<div id="outer">
|
||||
<div id="header">
|
||||
<div id="head-marker" class="scrolly"></div>
|
||||
|
||||
Reference in New Issue
Block a user