joshua/joshua.seigler.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updates

Browse source
This commit is contained in:
Joshua Seigler 2025-06-27 12:39:03 -04:00
parent cc49f2f9e6
commit 5abfc30442
3 changed files with 156 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
art/cloudscape/cloud.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 218 KiB

155
art/cloudscape/index.html Normal file
View file

@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Cloudscape</title>
<style>
*,
:before,
:after {
box-sizing: inherit;
}
html,
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,
body {
padding: 0;
margin: 0;
}
body {
background-color: #859cc4;
background-image: linear-gradient(to bottom, #4379ef, #859cc4);
background-size: 100% 80vh;
background-position: top;
background-repeat: no-repeat;
--cloudyHeaderBottom: max(35vh, 10rem);
}
main {
margin: 0 auto;
max-width: 80rem;
}
:root {
padding: 40vh 1rem 1rem;
font-size: 1.2em;
font-family: Inter, sans-serif;
--scrollLengthPx: 0;
}
.scene {
--durationSeconds: 120;
--duration: calc(var(--durationSeconds) * 1s);
--viewPointDelta: var(--cloudyHeaderBottom);
--travelDistance: 200vh;
z-index: -2;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100lvh;
overflow: hidden;
perspective: calc(0.25 * var(--cloudyHeaderBottom) + 0.75 * 35vmax);
perspective-origin: 50vw 80vh;
}
.sky {
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
--duration: 240s;
}
.cloud {
--height: 90vh;
pointer-events: none;
position: absolute;
left: -205vw;
right: -205vw;
top: calc(8vh - var(--viewPointDelta));
height: var(--height);
background-image: url("cloud.png");
background-size: auto 100%;
background-repeat: repeat-x;
background-position: calc(50% + cos(230 * var(--n)) * var(--height)) 50%;
animation-name: zoom;
animation-duration: var(--duration);
animation-timing-function: linear;
animation-delay: calc(-0.1 * var(--duration) * var(--n));
animation-iteration-count: infinite;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/*
#brand {
position: absolute;
left: 1rem;
right: 1rem;
bottom: calc(-35vh + var(--viewPointDelta));
font-family: Inter, sans-serif;
font-weight: bold;
text-align: center;
font-size: min(8vmax, 15vw, 7.7rem);
} */
@keyframes zoom {
0% {
opacity: 0;
transform: translate3d(
0,
calc(4 * var(--viewPointDelta)),
calc(-1 * var(--travelDistance))
);
}
20% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate3d(
0,
calc(-1 * var(--viewPointDelta) + calc(var(--cloudyHeaderBottom) - 35vh)),
calc(0.33333 * var(--travelDistance))
);
}
}
</style>
</head>
<body>
<div class="scene">
<div class="sky">
<div class="cloud" will-change style="--n: 0"></div>
<div class="cloud" will-change style="--n: 1"></div>
<div class="cloud" will-change style="--n: 2"></div>
<div class="cloud" will-change style="--n: 3"></div>
<div class="cloud" will-change style="--n: 4"></div>
<div class="cloud" will-change style="--n: 5"></div>
<div class="cloud" will-change style="--n: 6"></div>
<div class="cloud" will-change style="--n: 7"></div>
<div class="cloud" will-change style="--n: 8"></div>
<div class="cloud" will-change style="--n: 9"></div>
</div>
</div>
<main>
</main>
</body>
</html>

2
sitemap.xml
View file

@ -263,7 +263,7 @@
<url>
<loc>/feed.xml</loc>
<lastmod>2025-06-27T04:07:03.115Z</lastmod>
<lastmod>2025-06-27T16:39:00.460Z</lastmod>
</url>