155 lines
3.6 KiB
HTML
155 lines
3.6 KiB
HTML
<!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>
|