Landing page init and sticker mode
parent
8aa08e0318
commit
5d95a02784
@ -1,4 +1,3 @@
|
|||||||
SI16-VLTK
|
# LEARNING HOW TO WALK WHILE CAT-WALKING
|
||||||
==========
|
|
||||||
|
|
||||||
Change me.
|
eheh
|
||||||
|
|||||||
@ -1,11 +1,37 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<title>SI16</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
</head>
|
<title>Learning how to walk while cat-walking</title>
|
||||||
<body>
|
<link rel="stylesheet" href="style.css" />
|
||||||
hello world
|
<!-- <script src="position.js" defer></script> -->
|
||||||
</body>
|
<script src="sticker.js" defer></script>
|
||||||
</html>
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- <div class="container" id="container">
|
||||||
|
<button class="about-button">?</button>
|
||||||
|
<h1 class="title">Learning how to walk while cat-walking</h1>
|
||||||
|
<h2 class="info">Special Issue 16 - XPUB - 2021</h2>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<div id="sticker-container"></div>
|
||||||
|
|
||||||
|
<ul class="informations-list" id="information-list">
|
||||||
|
<li class="info">Special Issue 16</li>
|
||||||
|
<li class="info">Experimental Publishing</li>
|
||||||
|
<li class="info">Learning how to walk while cat-walking</li>
|
||||||
|
<li class="info">A vernacular API</li>
|
||||||
|
<li class="deco"><img src="/static/svg/function_2b.svg" /></li>
|
||||||
|
<li class="info">17.12.2021</li>
|
||||||
|
<li class="info">Varia</li>
|
||||||
|
<li class="deco"><img src="/static/svg/home_1b.svg" /></li>
|
||||||
|
<li class="info">Rotterdam</li>
|
||||||
|
<li class="info">Replace</li>
|
||||||
|
<li class="info">Map</li>
|
||||||
|
<li class="info">Etc</li>
|
||||||
|
<li class="deco"><img src="/static/svg/etc_1b.svg" /></li>
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.44 57.59"><defs><style>.cls-1{fill:none;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:2.5px;}.cls-2{fill:#1d1d1b;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M37.57,40.72a3.5,3.5,0,0,0-3,1.72,3.36,3.36,0,0,0-5.64-.13,3.78,3.78,0,1,0-.22,3.42,3.36,3.36,0,0,0,5.86.25,3.49,3.49,0,1,0,3-5.26Z"/><path class="cls-1" d="M54.2,30.74h0c-18-15.2-25.7,33.17-18-15.2S1.13,57.06,1.13,57.06"/><path class="cls-2" d="M27.66,42.21l-.07-.06.39.51,0-.07.25.6,0-.09.09.66v-.1l-.08.66a.35.35,0,0,1,0-.13l-.25.6a.64.64,0,0,1,.08-.14l-.39.51.13-.13-.51.39.13-.07-.6.25a.27.27,0,0,1,.12,0l-.66.09h.17l-.67-.09a.86.86,0,0,1,.23.06l-.59-.25a1.61,1.61,0,0,1,.33.2l-.51-.39c.12.09.22.19.33.29a1.77,1.77,0,0,0,.8.52,2.32,2.32,0,0,0,1.93,0,1.77,1.77,0,0,0,.8-.52l.39-.5a2.55,2.55,0,0,0,.35-1.27l-.09-.66a2.52,2.52,0,0,0-.65-1.1,2.39,2.39,0,0,0-.23-.22c-.19-.16-.4-.31-.6-.47l-.13-.09L28,41.1l-.07,0c-.21-.09-.43-.19-.65-.27l-.14,0a7.11,7.11,0,0,0-.79-.1h-.07c-.11,0-.56.07-.67.09h0a2.37,2.37,0,0,0-.4.15,3.17,3.17,0,0,0-.38.17l-.3.23-.29.23-.07.07-.21.27-.21.27,0,0a.08.08,0,0,0,0,.05c-.1.2-.19.42-.27.62l0,.11v0c0,.18-.07.49-.09.67v.08c0,.11.07.58.09.68s0,0,0,.06v0h0l.25.6,0,.05.2.26.21.27.05,0a2,2,0,0,0,.81.52,2.32,2.32,0,0,0,1.93,0,1.92,1.92,0,0,0,.8-.52l.39-.51A2.43,2.43,0,0,0,28.39,44l-.09-.66a2.53,2.53,0,0,0-.64-1.11Z"/><path class="cls-2" d="M24.53,45.94c3.21,0,3.22-5,0-5s-3.23,5,0,5Z"/><path class="cls-2" d="M31.38,46.65c3.22,0,3.22-5,0-5s-3.22,5,0,5Z"/><path class="cls-2" d="M37.52,46.41c3.22,0,3.22-5,0-5s-3.22,5,0,5Z"/><path class="cls-2" d="M33.5,46.18c3.22,0,3.23-5,0-5s-3.22,5,0,5Z"/><path class="cls-2" d="M24.44,47.91c3.21,0,3.22-5,0-5s-3.23,5,0,5Z"/><path class="cls-2" d="M38.37,47.31c3.22,0,3.22-5,0-5s-3.22,5,0,5Z"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.85 42.98"><defs><style>.cls-1{fill:none;}.cls-1,.cls-2{stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:2.5px;}.cls-2{fill:#1d1d1b;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M33.83,1.25H52s8.19,23.61,0,40.29"/><circle class="cls-2" cx="40.03" cy="35.54" r="6.19"/><path class="cls-1" d="M22.87,41.73h-18s-8.12-23.61,0-40.3"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 465 B |
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.12 50.84"><defs><style>.cls-1{fill:#1d1d1b;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:2.5px;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><ellipse class="cls-1" cx="14.37" cy="9.08" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="3.67" cy="8.8" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="11.95" cy="16.11" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="6.09" cy="21.24" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="11.95" cy="23.04" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="14.37" cy="30.93" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="16.79" cy="38.5" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="19.21" cy="44.53" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="38.03" cy="47.06" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="52.45" cy="33.51" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="40.45" cy="39.02" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="45.12" cy="46.66" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="45.12" cy="28.45" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="38.03" cy="30.98" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="38.03" cy="17.38" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="38.03" cy="3.78" rx="2.42" ry="2.53"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 74.26 64.97"><defs><style>.cls-1{fill:none;}.cls-1,.cls-2{stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:2.5px;}.cls-2{fill:#1d1d1b;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M67,43.1c-18.84-94.16-51.85,0-51.85,0"/><circle class="cls-1" cx="11.78" cy="53.19" r="10.53"/><circle class="cls-2" cx="67.01" cy="43.1" r="6"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 459 B |
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54.03 61.73"><defs><style>.cls-1{fill:none;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:2.5px;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="27.22" x2="27.22" y2="61.73"/><line class="cls-1" x1="53.18" y1="6.81" x2="27.22" y2="30.86"/><line class="cls-1" x1="50.16" y1="50.9" x2="27.22" y2="30.86"/><line class="cls-1" x1="0.6" y1="45.42" x2="27.22" y2="30.86"/><circle class="cls-1" cx="12.18" cy="21.12" r="9.74"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 554 B |
@ -0,0 +1,57 @@
|
|||||||
|
const informations = document.getElementById("information-list");
|
||||||
|
const stickerContainer = document.getElementById("sticker-container");
|
||||||
|
|
||||||
|
infoList = Array.from(informations.children);
|
||||||
|
loopIndex = 0;
|
||||||
|
|
||||||
|
let windowWidth;
|
||||||
|
let windowHeight;
|
||||||
|
|
||||||
|
let palette = ["#9EDAE2", "#9FD3A8", "#F7D8E8", "#F9F5B0", "#FFC496"];
|
||||||
|
|
||||||
|
window.addEventListener("load", () => {
|
||||||
|
getSize();
|
||||||
|
let color = palette[(palette.length * Math.random()) | 0];
|
||||||
|
document.documentElement.style.setProperty("--background", color);
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("resize", (e) => {
|
||||||
|
getSize();
|
||||||
|
});
|
||||||
|
|
||||||
|
function getSize() {
|
||||||
|
windowWidth = stickerContainer.clientWidth;
|
||||||
|
windowHeight = stickerContainer.clientHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
function percentagePosition(e, target) {
|
||||||
|
let targetRect = target.getBoundingClientRect();
|
||||||
|
let x = e.clientX - targetRect.left;
|
||||||
|
let y = e.clientY - targetRect.top;
|
||||||
|
return { x: ((x / windowWidth) * 100).toFixed(2), y: ((y / windowHeight) * 100).toFixed(2) };
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("click", (e) => {
|
||||||
|
placeSticker(percentagePosition(e, stickerContainer), infoList[loopIndex]);
|
||||||
|
|
||||||
|
// Cringe sorry
|
||||||
|
if (loopIndex < infoList.length - 1) {
|
||||||
|
loopIndex++;
|
||||||
|
} else {
|
||||||
|
loopIndex = 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function placeSticker(position, element) {
|
||||||
|
let sticker = element.cloneNode(true);
|
||||||
|
sticker.classList.add("sticker");
|
||||||
|
sticker.style.left = position.x + "%";
|
||||||
|
sticker.style.top = position.y + "%";
|
||||||
|
|
||||||
|
sticker.style.transform = `
|
||||||
|
translate(-50%, -50%)
|
||||||
|
rotate(${Math.random() * 40 - 20}deg)
|
||||||
|
`;
|
||||||
|
|
||||||
|
stickerContainer.appendChild(sticker);
|
||||||
|
}
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
:root {
|
||||||
|
--thickness: 1px;
|
||||||
|
--background: #9fd3a8;
|
||||||
|
--font: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background-color: var(--background);
|
||||||
|
font-size: 24px;
|
||||||
|
font-family: var(--font);
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .container {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
width: 100%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
justify-content: start;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-button {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
border: var(--thickness) solid currentColor;
|
||||||
|
background-color: var(--background);
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-button:hover {
|
||||||
|
background-color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
} */
|
||||||
|
|
||||||
|
/* .title, */
|
||||||
|
|
||||||
|
.info {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 8px;
|
||||||
|
background-color: var(--background);
|
||||||
|
border: var(--thickness) solid currentColor;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sticker-container {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticker {
|
||||||
|
position: absolute;
|
||||||
|
user-select: none;
|
||||||
|
border: var(--thickness) solid currentColor;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticker.info {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.informations-list {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticker.deco {
|
||||||
|
background-color: white;
|
||||||
|
min-width: 64px;
|
||||||
|
min-height: 64px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue