Nikology/nikology.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Build in Hero to home and animate stuff correctly

Browse Source
This commit is contained in:
Nikology
2026-04-20 21:31:57 +02:00
parent 037f3cf1fc
commit 1d8c130019
3 changed files with 110 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+65 -39
View File
@@ -21,6 +21,15 @@
</span>
</h1> -->
<header id="hero">
<h1>nikology.dev
<span class="bird-wrap">
<button id="birdButton"><img src="birb.svg" alt=""></button>
<svg id="barTemplate" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.47 8.47"><path fill="none" stroke="#3d2f1f" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.8" d="m1.5 4.23.23-.1a6 6 0 0 1 5.01 0l.23.1" style="paint-order:markers stroke fill"/></svg>
</span>
</h1>
</header>
<!-- Nav Bar -->
<nav>
<a href="/" data-link>Home</a>
@@ -54,7 +63,7 @@
<script>
const cache = new Map();
async function loadFragment(file) {
async function loadApp(file) {
if (!cache.has(file)) {
const res = await fetch(file);
if (!res.ok) {
@@ -71,68 +80,85 @@
return { status: 200, content: cache.get(file)};
}
async function render() {
async function fetchApp() {
const path = location.pathname;
document.body.classList.toggle('home', path === '/');
const file = `/pages${path === '/' ? '/home' : path}.html`;
const result = await loadFragment(file);
return await loadApp(file);
}
if (result.content) {
document.getElementById('app').innerHTML = result.content;
async function commit(appFile) {
if (appFile.content) {
document.getElementById('app').innerHTML = appFile.content;
} else {
const errorResult = await loadFragment('/pages/error.html');
const errorResult = await loadApp('/pages/error.html');
document.getElementById('app').innerHTML = errorResult.content;
document.getElementById('error-code').textContent = result.status;
document.getElementById('error-code').textContent = appFile.status;
}
}
document.addEventListener('click', e => {
async function navigate() {
const result = await fetchApp();
await commit(result);
}
document.addEventListener('click', async e => {
const link = e.target.closest('[data-link]');
if (link) {
e.preventDefault();
if (link.pathname === location.pathname) return;
history.pushState(null, '', link.href);
render();
const currentApp = document.getElementById('app');
currentApp.classList.add('fading');
const fetchedApp = fetchApp();
await new Promise(r => setTimeout(r, 300));
await commit(await fetchedApp);
currentApp.classList.remove('fading')
}
});
window.addEventListener('popstate', render);
render().then(() => {
window.addEventListener('popstate', navigate);
navigate().then(() => {
requestAnimationFrame(() => document.body.classList.add('ready'))
});
// const DISTANCE = 25
// const birdIcon = document.getElementById("birdButton");
// const birdSound = new Audio("SnowBuntingSound.ogg");
// const template = document.getElementById("barTemplate");
// const wrap = document.querySelector(".bird-wrap");
const DISTANCE = 40
const birdIcon = document.getElementById("birdButton");
const birdSound = new Audio("SnowBuntingSound.ogg");
const template = document.getElementById("barTemplate");
const wrap = document.querySelector(".bird-wrap");
// function spawnBar(distance, angle, delay = 0) {
// const clone = template.cloneNode(true);
// clone.removeAttribute("id");
// clone.classList.add("bar");
// clone.style.setProperty("--angle", `${angle}deg`);
// clone.style.setProperty("--distance", `${-distance}px`);
// clone.style.setProperty("--delay", `${delay}s`);
// wrap.appendChild(clone);
function spawnBar(distance, angle, delay = 0) {
const clone = template.cloneNode(true);
clone.removeAttribute("id");
clone.classList.add("bar");
clone.style.setProperty("--angle", `${angle}deg`);
clone.style.setProperty("--distance", `${-distance}px`);
clone.style.setProperty("--delay", `${delay}s`);
wrap.appendChild(clone);
// clone.addEventListener("animationend", () => clone.remove());
// }
clone.addEventListener("animationend", () => clone.remove());
}
// function birdSoundAnim() {
// const leftRandom = (Math.random() * 40) + 40
// const rightRandom = (Math.random() * 40) + 40
// spawnBar(DISTANCE, -leftRandom, 0.2)
// spawnBar(DISTANCE, -leftRandom, 0.4)
// spawnBar(DISTANCE, rightRandom, 0.6)
// spawnBar(DISTANCE, rightRandom, 0.8)
// }
function birdSoundAnim() {
const leftRandom = (Math.random() * 20) + 80
const rightRandom = (Math.random() * 20) + 40
spawnBar(DISTANCE, -leftRandom, 0.2)
spawnBar(DISTANCE, -leftRandom, 0.4)
spawnBar(DISTANCE, -rightRandom, 0.6)
spawnBar(DISTANCE, -rightRandom, 0.8)
}
// birdIcon.addEventListener("click", (e) => {
// if (!birdSound.paused) return;
// birdSound.play();
// birdSoundAnim()
// });
birdIcon.addEventListener("click", (e) => {
if (!birdSound.paused) return;
birdSound.play();
birdSoundAnim()
});
</script>
</body>
</html>
pages/home.html
+1 -8
View File
@@ -1,14 +1,7 @@
<h1>nikology.dev
<span class="bird-wrap">
<button id="birdButton"><img src="birb.svg" alt=""></button>
<svg id="barTemplate" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.47 8.47"><path fill="none" stroke="#3d2f1f" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.8" d="m1.5 4.23.23-.1a6 6 0 0 1 5.01 0l.23.1" style="paint-order:markers stroke fill"/></svg>
</span>
</h1>
<footer>
<p>Bird recording by Petter Westberg via <a href="https://xeno-canto.org/1087467" target="_blank" rel="noopener">xeno-canto</a>, CC BY-NC-SA 4.0</p>
<p>
<a href="https://gitlab.com/Nikology/nikology.dev">
<a href="https://gitlab.com/Nikology/nikology.dev" target="_blank" rel="noopener">
Page Source
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380"><path d="m282.83 170.73-.27-.69-26.14-68.22a6.8 6.8 0 0 0-2.69-3.24 7 7 0 0 0-8 .43 7 7 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 0 0-2.32-3.53 7 7 0 0 0-8-.43 6.87 6.87 0 0 0-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0 0 16.08-56.04" transform="matrix(1.9787 0 0 2.0178 -185.94 -193.36)"/></svg>
</a>
styles.css
+43 -13
View File
@@ -12,18 +12,8 @@ body {
justify-content: flex-start;
padding: 4rem 20rem;
box-sizing: border-box;
}
position: relative;
body.ready {
transition: padding-top 0.5s ease;
}
body.home {
padding-top: 35vh;
}
body.home h1 {
font-size: 4rem;
}
@media(max-width: 1024px) {
@@ -32,6 +22,46 @@ body.home h1 {
}
}
body.ready {
transition: padding-top 0.6s ease;
}
body.ready #hero {
transition: transform 0.6s ease, opacity 0.3s ease;
}
body.home {
padding-top: 45vh;
}
body:not(.home) #hero {
pointer-events: none;
opacity: 0;
transform: translateY(-40vh);
}
#hero {
/* opacity: 0; */
top: 30vh;
position:absolute;
font-size: 4rem;
opacity: 1;
}
#hero h1 {
margin: 0;
}
/* App */
#app {
transition: opacity 0.3s;
}
#app.fading {
opacity: 0;
}
/* Nav Bar */
nav {
@@ -135,8 +165,8 @@ footer svg {
.bar {
opacity: 0;
position: absolute;
top: 0;
left: 10px; /* Offset */
top: 15px;
left: 20px; /* Offset */
animation: pop 0.8s ease-out var(--delay);
pointer-events: none;
}