173 lines
8.3 KiB
HTML
173 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Vanta Clouds2</title>
|
|
<style>
|
|
html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; }
|
|
#vanta { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; }
|
|
#moon {
|
|
position: fixed;
|
|
top: 80px;
|
|
right: 80px;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at 35% 35%, #e6dfd1, #999187);
|
|
box-shadow: 0 0 30px rgba(229, 224, 209, 0.4);
|
|
opacity: 0;
|
|
transition: opacity 0.5s;
|
|
z-index: 5;
|
|
pointer-events: none;
|
|
}
|
|
#sun {
|
|
position: fixed;
|
|
top: 80px;
|
|
right: 80px;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at 35% 35%, #f3ede1, #e0914f);
|
|
box-shadow: 0 0 60px rgba(224, 145, 79, 0.6);
|
|
opacity: 0;
|
|
transition: opacity 0.5s;
|
|
z-index: 5;
|
|
pointer-events: none;
|
|
}
|
|
#clock {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
color: #e6dfd1;
|
|
font-family: monospace;
|
|
font-size: 18px;
|
|
background: rgba(28, 27, 31, 0.7);
|
|
padding: 8px 14px;
|
|
border-radius: 6px;
|
|
z-index: 9999;
|
|
letter-spacing: 1px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="vanta"></div>
|
|
<div id="moon"></div>
|
|
<div id="sun"></div>
|
|
<div id="clock">00:00</div>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.clouds.min.js"></script>
|
|
<script>
|
|
var effect = VANTA.CLOUDS({
|
|
el: "#vanta",
|
|
mouseControls: false,
|
|
touchControls: false,
|
|
gyroControls: false,
|
|
minHeight: 200.00,
|
|
minWidth: 200.00,
|
|
scale: 1.00,
|
|
scaleMobile: 4,
|
|
speed: 0.4,
|
|
backgroundColor: 0x0,
|
|
backgroundAlpha: 0,
|
|
skyColor: 0x3a4458,
|
|
cloudColor: 0x6d6a63,
|
|
lightColor: 0xb0a89a,
|
|
texturePath: "./noise.png"
|
|
}) || { setOptions: function() {} };
|
|
|
|
function hexToRgb(h) {
|
|
return [(h >> 16) & 255, (h >> 8) & 255, h & 255];
|
|
}
|
|
function rgbToHex(r, g, b) {
|
|
return (Math.round(r) << 16) | (Math.round(g) << 8) | Math.round(b);
|
|
}
|
|
function lerp(a, b, t) {
|
|
return a + (b - a) * t;
|
|
}
|
|
function lerpColor(c1, c2, t) {
|
|
var a = hexToRgb(c1), b = hexToRgb(c2);
|
|
return rgbToHex(lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t));
|
|
}
|
|
function smooth(t) {
|
|
return t * t * (3 - 2 * t);
|
|
}
|
|
|
|
var CYCLE = 20000;
|
|
|
|
var palette = [
|
|
{ t: 0.00, sky: 0x0a0a14, cloud: 0x2a2822, light: 0x999187, bg: 0x0a0a14, cloudShadow: 0x100f12, sun: 0x999187, sunGlare: 0x6d6a63, sunLight: 0x999187, moon: 1, sunVis: 0 },
|
|
{ t: 0.08, sky: 0x141428, cloud: 0x2a2822, light: 0x999187, bg: 0x1a1428, cloudShadow: 0x141316, sun: 0x999187, sunGlare: 0x6d6a63, sunLight: 0x999187, moon: 1, sunVis: 0 },
|
|
{ t: 0.18, sky: 0x3a2a28, cloud: 0x4a2e1c, light: 0xa85f1d, bg: 0x4a2820, cloudShadow: 0x1f1814, sun: 0xc56a2b, sunGlare: 0xa85f1d, sunLight: 0xc56a2b, moon: 0.3, sunVis: 0.3 },
|
|
{ t: 0.28, sky: 0x6a4030, cloud: 0x5a3a28, light: 0xd6824a, bg: 0x7a4530, cloudShadow: 0x2a1f17, sun: 0xe0914f, sunGlare: 0xd6824a, sunLight: 0xe0914f, moon: 0, sunVis: 0.8 },
|
|
{ t: 0.42, sky: 0x4a5060, cloud: 0x6d6a63, light: 0xe0d4be, bg: 0x506080, cloudShadow: 0x3a4458, sun: 0xf3ede1, sunGlare: 0xe6dfd1, sunLight: 0xf3ede1, moon: 0, sunVis: 1 },
|
|
{ t: 0.62, sky: 0x3a4458, cloud: 0x6d6a63, light: 0xe6dfd1, bg: 0x445878, cloudShadow: 0x2a3450, sun: 0xf3ede1, sunGlare: 0xe6dfd1, sunLight: 0xf3ede1, moon: 0, sunVis: 1 },
|
|
{ t: 0.66, sky: 0x4a4a55, cloud: 0x6d5a52, light: 0xe6c89a, bg: 0x5a554e, cloudShadow: 0x3a3428, sun: 0xe6c89a, sunGlare: 0xd6b46a, sunLight: 0xe6c89a, moon: 0, sunVis: 0.95 },
|
|
{ t: 0.69, sky: 0x6a5040, cloud: 0x6d4a3a, light: 0xe6a872, bg: 0x7a5540, cloudShadow: 0x4a3025, sun: 0xe6a872, sunGlare: 0xd6824a, sunLight: 0xe6a872, moon: 0, sunVis: 0.85 },
|
|
{ t: 0.72, sky: 0x7a4530, cloud: 0x6d3a28, light: 0xe0914f, bg: 0x7a3825, cloudShadow: 0x4a2818, sun: 0xe0914f, sunGlare: 0xa86030, sunLight: 0xe0914f, moon: 0, sunVis: 0.7 },
|
|
{ t: 0.78, sky: 0x5a3030, cloud: 0x4a2e22, light: 0xa86030, bg: 0x5a2820, cloudShadow: 0x2a1818, sun: 0xa86030, sunGlare: 0x6b4423, sunLight: 0xa86030, moon: 0, sunVis: 0.4 },
|
|
{ t: 0.85, sky: 0x3a2030, cloud: 0x3a2a2a, light: 0x6a4030, bg: 0x4a2030, cloudShadow: 0x1f1814, sun: 0x6a4030, sunGlare: 0x54514f, sunLight: 0x6a4030, moon: 0.3, sunVis: 0.1 },
|
|
{ t: 0.92, sky: 0x1a1428, cloud: 0x2a2822, light: 0x999187, bg: 0x1a1428, cloudShadow: 0x141316, sun: 0x999187, sunGlare: 0x6d6a63, sunLight: 0x999187, moon: 0.9, sunVis: 0 },
|
|
{ t: 1.00, sky: 0x0a0a14, cloud: 0x2a2822, light: 0x999187, bg: 0x0a0a14, cloudShadow: 0x100f12, sun: 0x999187, sunGlare: 0x6d6a63, sunLight: 0x999187, moon: 1, sunVis: 0 }
|
|
];
|
|
|
|
function getColor(t) {
|
|
t = t % 1;
|
|
for (var i = 0; i < palette.length - 1; i++) {
|
|
if (t >= palette[i].t && t <= palette[i + 1].t) {
|
|
var span = palette[i + 1].t - palette[i].t;
|
|
var localT = span === 0 ? 0 : (t - palette[i].t) / span;
|
|
var s = smooth(localT);
|
|
return {
|
|
sky: lerpColor(palette[i].sky, palette[i + 1].sky, s),
|
|
cloud: lerpColor(palette[i].cloud, palette[i + 1].cloud, s),
|
|
light: lerpColor(palette[i].light, palette[i + 1].light, s),
|
|
bg: lerpColor(palette[i].bg, palette[i + 1].bg, s),
|
|
cloudShadow: lerpColor(palette[i].cloudShadow, palette[i + 1].cloudShadow, s),
|
|
sun: lerpColor(palette[i].sun, palette[i + 1].sun, s),
|
|
sunGlare: lerpColor(palette[i].sunGlare, palette[i + 1].sunGlare, s),
|
|
sunLight: lerpColor(palette[i].sunLight, palette[i + 1].sunLight, s),
|
|
moon: palette[i].moon + (palette[i + 1].moon - palette[i].moon) * s,
|
|
sunVis: palette[i].sunVis + (palette[i + 1].sunVis - palette[i].sunVis) * s
|
|
};
|
|
}
|
|
}
|
|
return { sky: palette[0].sky, cloud: palette[0].cloud, light: palette[0].light, bg: palette[0].bg, cloudShadow: palette[0].cloudShadow, sun: palette[0].sun, sunGlare: palette[0].sunGlare, sunLight: palette[0].sunLight, moon: 1, sunVis: 0 };
|
|
}
|
|
|
|
var startTime = Date.now();
|
|
var clockEl = document.getElementById('clock');
|
|
var moonEl = document.getElementById('moon');
|
|
var sunEl = document.getElementById('sun');
|
|
|
|
function formatTime(totalMinutes) {
|
|
var hours = Math.floor(totalMinutes / 60) % 24;
|
|
var minutes = Math.floor(totalMinutes % 60);
|
|
var pad = function(n) { return n < 10 ? '0' + n : '' + n; };
|
|
return pad(hours) + ':' + pad(minutes);
|
|
}
|
|
|
|
function animate() {
|
|
var elapsed = (Date.now() - startTime) % CYCLE;
|
|
var t = elapsed / CYCLE;
|
|
var c = getColor(t);
|
|
effect.setOptions({
|
|
skyColor: c.sky,
|
|
cloudColor: c.cloud,
|
|
cloudShadowColor: c.cloudShadow,
|
|
sunColor: c.sun,
|
|
sunGlareColor: c.sunGlare,
|
|
sunlightColor: c.sunLight,
|
|
backgroundColor: c.bg
|
|
});
|
|
document.body.style.backgroundColor = '#' + ('00000' + c.bg.toString(16)).slice(-6);
|
|
moonEl.style.opacity = c.moon;
|
|
sunEl.style.opacity = c.sunVis;
|
|
clockEl.textContent = formatTime(t * 1440);
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
animate();
|
|
</script>
|
|
</body>
|
|
</html> |