mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-07-28 12:59:45 +00:00
Make forest parallax continuous and add scroll-depth journey
The drift clamp saturated after ~2600px, so nothing moved on long pages. The vertical drift now maps scroll progress (0..1 over the full document) onto the stalks' overscan, so the parallax runs end to end. Turn the background into a descent through the forest: god-ray light shafts and the canopy fade out while a dusk tint, thicker mist, the terracotta horizon glow and the fireflies fade in as you scroll down. Fireflies additionally wander organically (independent translate property composing with their scale pulse), and on hover-capable devices the bamboo layers tilt subtly toward the cursor. All layers animate transform/opacity only, rAF-throttled, reduced-motion safe. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
KoalaDev
@@ -106,11 +106,19 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-nature" aria-hidden="true">
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
<div class="bg-dusk-tint"></div>
|
||||
<div class="bg-depth-day">
|
||||
<div class="bg-godrays">
|
||||
<span class="godray godray-1"></span>
|
||||
<span class="godray godray-2"></span>
|
||||
<span class="godray godray-3"></span>
|
||||
</div>
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
</div>
|
||||
<div id="bamboo-far">
|
||||
<span class="bamboo-stalk far-1"></span>
|
||||
<span class="bamboo-stalk far-2"></span>
|
||||
@@ -143,15 +151,17 @@
|
||||
<span class="bg-grass bg-grass-2"></span>
|
||||
<span class="bg-grass bg-grass-3"></span>
|
||||
<span class="bg-grass bg-grass-4"></span>
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
<div class="bg-depth-dusk">
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
</div>
|
||||
<div class="bg-light-sweep"></div>
|
||||
<div class="bg-grain"></div>
|
||||
</div>
|
||||
|
||||
@@ -112,11 +112,19 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-nature" aria-hidden="true">
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
<div class="bg-dusk-tint"></div>
|
||||
<div class="bg-depth-day">
|
||||
<div class="bg-godrays">
|
||||
<span class="godray godray-1"></span>
|
||||
<span class="godray godray-2"></span>
|
||||
<span class="godray godray-3"></span>
|
||||
</div>
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
</div>
|
||||
<div id="bamboo-far">
|
||||
<span class="bamboo-stalk far-1"></span>
|
||||
<span class="bamboo-stalk far-2"></span>
|
||||
@@ -149,15 +157,17 @@
|
||||
<span class="bg-grass bg-grass-2"></span>
|
||||
<span class="bg-grass bg-grass-3"></span>
|
||||
<span class="bg-grass bg-grass-4"></span>
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
<div class="bg-depth-dusk">
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
</div>
|
||||
<div class="bg-light-sweep"></div>
|
||||
<div class="bg-grain"></div>
|
||||
</div>
|
||||
|
||||
@@ -112,11 +112,19 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-nature" aria-hidden="true">
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
<div class="bg-dusk-tint"></div>
|
||||
<div class="bg-depth-day">
|
||||
<div class="bg-godrays">
|
||||
<span class="godray godray-1"></span>
|
||||
<span class="godray godray-2"></span>
|
||||
<span class="godray godray-3"></span>
|
||||
</div>
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
</div>
|
||||
<div id="bamboo-far">
|
||||
<span class="bamboo-stalk far-1"></span>
|
||||
<span class="bamboo-stalk far-2"></span>
|
||||
@@ -149,15 +157,17 @@
|
||||
<span class="bg-grass bg-grass-2"></span>
|
||||
<span class="bg-grass bg-grass-3"></span>
|
||||
<span class="bg-grass bg-grass-4"></span>
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
<div class="bg-depth-dusk">
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
</div>
|
||||
<div class="bg-light-sweep"></div>
|
||||
<div class="bg-grain"></div>
|
||||
</div>
|
||||
|
||||
@@ -112,11 +112,19 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-nature" aria-hidden="true">
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
<div class="bg-dusk-tint"></div>
|
||||
<div class="bg-depth-day">
|
||||
<div class="bg-godrays">
|
||||
<span class="godray godray-1"></span>
|
||||
<span class="godray godray-2"></span>
|
||||
<span class="godray godray-3"></span>
|
||||
</div>
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
</div>
|
||||
<div id="bamboo-far">
|
||||
<span class="bamboo-stalk far-1"></span>
|
||||
<span class="bamboo-stalk far-2"></span>
|
||||
@@ -149,15 +157,17 @@
|
||||
<span class="bg-grass bg-grass-2"></span>
|
||||
<span class="bg-grass bg-grass-3"></span>
|
||||
<span class="bg-grass bg-grass-4"></span>
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
<div class="bg-depth-dusk">
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
</div>
|
||||
<div class="bg-light-sweep"></div>
|
||||
<div class="bg-grain"></div>
|
||||
</div>
|
||||
|
||||
@@ -112,11 +112,19 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-nature" aria-hidden="true">
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
<div class="bg-dusk-tint"></div>
|
||||
<div class="bg-depth-day">
|
||||
<div class="bg-godrays">
|
||||
<span class="godray godray-1"></span>
|
||||
<span class="godray godray-2"></span>
|
||||
<span class="godray godray-3"></span>
|
||||
</div>
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
</div>
|
||||
<div id="bamboo-far">
|
||||
<span class="bamboo-stalk far-1"></span>
|
||||
<span class="bamboo-stalk far-2"></span>
|
||||
@@ -149,15 +157,17 @@
|
||||
<span class="bg-grass bg-grass-2"></span>
|
||||
<span class="bg-grass bg-grass-3"></span>
|
||||
<span class="bg-grass bg-grass-4"></span>
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
<div class="bg-depth-dusk">
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
</div>
|
||||
<div class="bg-light-sweep"></div>
|
||||
<div class="bg-grain"></div>
|
||||
</div>
|
||||
|
||||
@@ -112,11 +112,19 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-nature" aria-hidden="true">
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
<div class="bg-dusk-tint"></div>
|
||||
<div class="bg-depth-day">
|
||||
<div class="bg-godrays">
|
||||
<span class="godray godray-1"></span>
|
||||
<span class="godray godray-2"></span>
|
||||
<span class="godray godray-3"></span>
|
||||
</div>
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
</div>
|
||||
<div id="bamboo-far">
|
||||
<span class="bamboo-stalk far-1"></span>
|
||||
<span class="bamboo-stalk far-2"></span>
|
||||
@@ -149,15 +157,17 @@
|
||||
<span class="bg-grass bg-grass-2"></span>
|
||||
<span class="bg-grass bg-grass-3"></span>
|
||||
<span class="bg-grass bg-grass-4"></span>
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
<div class="bg-depth-dusk">
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
</div>
|
||||
<div class="bg-light-sweep"></div>
|
||||
<div class="bg-grain"></div>
|
||||
</div>
|
||||
|
||||
@@ -112,11 +112,19 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-nature" aria-hidden="true">
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
<div class="bg-dusk-tint"></div>
|
||||
<div class="bg-depth-day">
|
||||
<div class="bg-godrays">
|
||||
<span class="godray godray-1"></span>
|
||||
<span class="godray godray-2"></span>
|
||||
<span class="godray godray-3"></span>
|
||||
</div>
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
</div>
|
||||
<div id="bamboo-far">
|
||||
<span class="bamboo-stalk far-1"></span>
|
||||
<span class="bamboo-stalk far-2"></span>
|
||||
@@ -149,15 +157,17 @@
|
||||
<span class="bg-grass bg-grass-2"></span>
|
||||
<span class="bg-grass bg-grass-3"></span>
|
||||
<span class="bg-grass bg-grass-4"></span>
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
<div class="bg-depth-dusk">
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
</div>
|
||||
<div class="bg-light-sweep"></div>
|
||||
<div class="bg-grain"></div>
|
||||
</div>
|
||||
|
||||
+41
-8
@@ -212,17 +212,50 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
nav.classList.toggle('nav-scrolled', window.scrollY > 50);
|
||||
}, { passive: true });
|
||||
|
||||
// Bamboo forest scroll parallax (background layers only)
|
||||
// Bamboo forest: scroll journey + parallax (background layers only).
|
||||
// The vertical drift maps scroll PROGRESS (0..1 over the whole page) onto
|
||||
// the stalks' 20% overscan, so the parallax runs for the entire scroll
|
||||
// instead of saturating after a few hundred pixels. The same progress
|
||||
// value crossfades the scene from sunlit canopy into misty dusk, and on
|
||||
// pointer devices the layers tilt slightly toward the cursor.
|
||||
const bambooFar = document.getElementById('bamboo-far');
|
||||
const bambooNear = document.getElementById('bamboo-near');
|
||||
if (bambooFar && bambooNear && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
||||
window.addEventListener('scroll', () => {
|
||||
// Cap the drift at ~14% of the viewport: the stalks have 20%
|
||||
// overscan, so they always span the full height while parallaxing.
|
||||
const maxShift = window.innerHeight * 0.14;
|
||||
bambooFar.style.transform = `translateY(${Math.min(window.scrollY * 0.04, maxShift)}px)`;
|
||||
bambooNear.style.transform = `translateY(${-Math.min(window.scrollY * 0.06, maxShift)}px)`;
|
||||
}, { passive: true });
|
||||
const depthDay = document.querySelector('.bg-depth-day');
|
||||
const depthDusk = document.querySelector('.bg-depth-dusk');
|
||||
const duskTint = document.querySelector('.bg-dusk-tint');
|
||||
let mouseX = 0;
|
||||
let framePending = false;
|
||||
|
||||
const renderForest = () => {
|
||||
framePending = false;
|
||||
const doc = document.documentElement;
|
||||
const maxScroll = Math.max(1, doc.scrollHeight - window.innerHeight);
|
||||
const depth = Math.min(1, window.scrollY / maxScroll);
|
||||
const shift = window.innerHeight * 0.14;
|
||||
bambooFar.style.transform = `translate(${(-mouseX * 5).toFixed(1)}px, ${(depth * shift).toFixed(1)}px)`;
|
||||
bambooNear.style.transform = `translate(${(mouseX * 11).toFixed(1)}px, ${(-depth * shift).toFixed(1)}px)`;
|
||||
if (depthDay) depthDay.style.opacity = (1 - depth * 0.75).toFixed(3);
|
||||
if (depthDusk) depthDusk.style.opacity = (0.35 + depth * 0.65).toFixed(3);
|
||||
if (duskTint) duskTint.style.opacity = (depth * 0.85).toFixed(3);
|
||||
};
|
||||
|
||||
const requestForestFrame = () => {
|
||||
if (!framePending) {
|
||||
framePending = true;
|
||||
requestAnimationFrame(renderForest);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', requestForestFrame, { passive: true });
|
||||
window.addEventListener('resize', requestForestFrame, { passive: true });
|
||||
if (window.matchMedia('(hover: hover)').matches) {
|
||||
window.addEventListener('pointermove', (e) => {
|
||||
mouseX = (e.clientX / window.innerWidth - 0.5) * 2;
|
||||
requestForestFrame();
|
||||
}, { passive: true });
|
||||
}
|
||||
renderForest();
|
||||
}
|
||||
|
||||
// Invite Detection & Bridge
|
||||
|
||||
+24
-14
@@ -50,11 +50,19 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-nature" aria-hidden="true">
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
<div class="bg-dusk-tint"></div>
|
||||
<div class="bg-depth-day">
|
||||
<div class="bg-godrays">
|
||||
<span class="godray godray-1"></span>
|
||||
<span class="godray godray-2"></span>
|
||||
<span class="godray godray-3"></span>
|
||||
</div>
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
</div>
|
||||
<div id="bamboo-far">
|
||||
<span class="bamboo-stalk far-1"></span>
|
||||
<span class="bamboo-stalk far-2"></span>
|
||||
@@ -87,15 +95,17 @@
|
||||
<span class="bg-grass bg-grass-2"></span>
|
||||
<span class="bg-grass bg-grass-3"></span>
|
||||
<span class="bg-grass bg-grass-4"></span>
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
<div class="bg-depth-dusk">
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
</div>
|
||||
<div class="bg-light-sweep"></div>
|
||||
<div class="bg-grain"></div>
|
||||
</div>
|
||||
|
||||
+24
-14
@@ -50,11 +50,19 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-nature" aria-hidden="true">
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
<div class="bg-dusk-tint"></div>
|
||||
<div class="bg-depth-day">
|
||||
<div class="bg-godrays">
|
||||
<span class="godray godray-1"></span>
|
||||
<span class="godray godray-2"></span>
|
||||
<span class="godray godray-3"></span>
|
||||
</div>
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
</div>
|
||||
<div id="bamboo-far">
|
||||
<span class="bamboo-stalk far-1"></span>
|
||||
<span class="bamboo-stalk far-2"></span>
|
||||
@@ -87,15 +95,17 @@
|
||||
<span class="bg-grass bg-grass-2"></span>
|
||||
<span class="bg-grass bg-grass-3"></span>
|
||||
<span class="bg-grass bg-grass-4"></span>
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
<div class="bg-depth-dusk">
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
</div>
|
||||
<div class="bg-light-sweep"></div>
|
||||
<div class="bg-grain"></div>
|
||||
</div>
|
||||
|
||||
+24
-14
@@ -50,11 +50,19 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-nature" aria-hidden="true">
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
<div class="bg-dusk-tint"></div>
|
||||
<div class="bg-depth-day">
|
||||
<div class="bg-godrays">
|
||||
<span class="godray godray-1"></span>
|
||||
<span class="godray godray-2"></span>
|
||||
<span class="godray godray-3"></span>
|
||||
</div>
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
</div>
|
||||
<div id="bamboo-far">
|
||||
<span class="bamboo-stalk far-1"></span>
|
||||
<span class="bamboo-stalk far-2"></span>
|
||||
@@ -87,15 +95,17 @@
|
||||
<span class="bg-grass bg-grass-2"></span>
|
||||
<span class="bg-grass bg-grass-3"></span>
|
||||
<span class="bg-grass bg-grass-4"></span>
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
<div class="bg-depth-dusk">
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
</div>
|
||||
<div class="bg-light-sweep"></div>
|
||||
<div class="bg-grain"></div>
|
||||
</div>
|
||||
|
||||
+24
-14
@@ -35,11 +35,19 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-nature" aria-hidden="true">
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
<div class="bg-dusk-tint"></div>
|
||||
<div class="bg-depth-day">
|
||||
<div class="bg-godrays">
|
||||
<span class="godray godray-1"></span>
|
||||
<span class="godray godray-2"></span>
|
||||
<span class="godray godray-3"></span>
|
||||
</div>
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
</div>
|
||||
<div id="bamboo-far">
|
||||
<span class="bamboo-stalk far-1"></span>
|
||||
<span class="bamboo-stalk far-2"></span>
|
||||
@@ -72,15 +80,17 @@
|
||||
<span class="bg-grass bg-grass-2"></span>
|
||||
<span class="bg-grass bg-grass-3"></span>
|
||||
<span class="bg-grass bg-grass-4"></span>
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
<div class="bg-depth-dusk">
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
</div>
|
||||
<div class="bg-light-sweep"></div>
|
||||
<div class="bg-grain"></div>
|
||||
</div>
|
||||
|
||||
+24
-14
@@ -50,11 +50,19 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-nature" aria-hidden="true">
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
<div class="bg-dusk-tint"></div>
|
||||
<div class="bg-depth-day">
|
||||
<div class="bg-godrays">
|
||||
<span class="godray godray-1"></span>
|
||||
<span class="godray godray-2"></span>
|
||||
<span class="godray godray-3"></span>
|
||||
</div>
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
</div>
|
||||
<div id="bamboo-far">
|
||||
<span class="bamboo-stalk far-1"></span>
|
||||
<span class="bamboo-stalk far-2"></span>
|
||||
@@ -87,15 +95,17 @@
|
||||
<span class="bg-grass bg-grass-2"></span>
|
||||
<span class="bg-grass bg-grass-3"></span>
|
||||
<span class="bg-grass bg-grass-4"></span>
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
<div class="bg-depth-dusk">
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
</div>
|
||||
<div class="bg-light-sweep"></div>
|
||||
<div class="bg-grain"></div>
|
||||
</div>
|
||||
|
||||
+79
-7
@@ -248,6 +248,59 @@ body {
|
||||
50% { margin-left: 26px; }
|
||||
}
|
||||
|
||||
/* Scroll journey: JS drives the opacity of these two groups so the page
|
||||
travels from sunlit canopy (top) into misty dusk (bottom). Static
|
||||
defaults below keep the scene balanced without JS. */
|
||||
.bg-depth-day,
|
||||
.bg-depth-dusk {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.bg-depth-dusk {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Dusk tint: darkens and warms the whole scene as you descend */
|
||||
.bg-dusk-tint {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
background: linear-gradient(180deg,
|
||||
oklch(0.10 0.03 145 / 0.15) 0%,
|
||||
oklch(0.12 0.045 142 / 0.5) 65%,
|
||||
oklch(0.16 0.07 55 / 0.35) 100%);
|
||||
}
|
||||
|
||||
/* God rays: soft light shafts falling through the canopy */
|
||||
.bg-godrays {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
.godray {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 115%;
|
||||
background: linear-gradient(180deg, oklch(0.85 0.06 130 / 0.10), transparent 78%);
|
||||
filter: blur(10px);
|
||||
transform: rotate(14deg);
|
||||
transform-origin: top center;
|
||||
animation: rayShimmer 9s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.godray-1 { left: 16%; width: 120px; animation-duration: 8s; }
|
||||
.godray-2 { left: 33%; width: 70px; animation-delay: -3s; background: linear-gradient(180deg, oklch(0.85 0.06 130 / 0.07), transparent 78%); }
|
||||
.godray-3 { left: 56%; width: 140px; animation-duration: 13s; animation-delay: -6s; background: linear-gradient(180deg, oklch(0.85 0.05 110 / 0.08), transparent 75%); }
|
||||
|
||||
@keyframes rayShimmer {
|
||||
0% { opacity: 0.45; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* (e) Canopy: dark vignette at the top plus hanging leaf arcs */
|
||||
.bg-canopy {
|
||||
position: absolute;
|
||||
@@ -332,7 +385,9 @@ body {
|
||||
border-radius: 50%;
|
||||
background: oklch(0.68 0.13 150);
|
||||
box-shadow: 0 0 8px oklch(0.68 0.13 150);
|
||||
animation: fireflyPulse 3.8s ease-in-out infinite;
|
||||
animation:
|
||||
fireflyPulse 3.8s ease-in-out infinite,
|
||||
fireflyWander 21s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.firefly:nth-child(even) {
|
||||
@@ -342,18 +397,26 @@ body {
|
||||
box-shadow: 0 0 8px oklch(0.62 0.14 45);
|
||||
}
|
||||
|
||||
.firefly-1 { top: 32%; left: 12%; animation-delay: -0.4s; }
|
||||
.firefly-2 { top: 58%; left: 22%; animation-duration: 4.4s; animation-delay: -2.1s; }
|
||||
.firefly-3 { top: 44%; left: 46%; animation-duration: 3.4s; animation-delay: -1.2s; }
|
||||
.firefly-4 { top: 70%; left: 64%; animation-duration: 4.1s; animation-delay: -3s; }
|
||||
.firefly-5 { top: 26%; left: 78%; animation-duration: 3.6s; animation-delay: -1.8s; }
|
||||
.firefly-6 { top: 62%; left: 90%; animation-duration: 4.2s; animation-delay: -0.9s; }
|
||||
.firefly-1 { top: 32%; left: 12%; animation-delay: -0.4s, -4s; }
|
||||
.firefly-2 { top: 58%; left: 22%; animation-duration: 4.4s, 26s; animation-delay: -2.1s, -11s; }
|
||||
.firefly-3 { top: 44%; left: 46%; animation-duration: 3.4s, 18s; animation-delay: -1.2s, -7s; }
|
||||
.firefly-4 { top: 70%; left: 64%; animation-duration: 4.1s, 29s; animation-delay: -3s, -19s; }
|
||||
.firefly-5 { top: 26%; left: 78%; animation-duration: 3.6s, 23s; animation-delay: -1.8s, -14s; }
|
||||
.firefly-6 { top: 62%; left: 90%; animation-duration: 4.2s, 17s; animation-delay: -0.9s, -2s; }
|
||||
|
||||
@keyframes fireflyPulse {
|
||||
0%, 100% { opacity: 0.2; transform: scale(1); }
|
||||
50% { opacity: 0.9; transform: scale(1.35); }
|
||||
}
|
||||
|
||||
@keyframes fireflyWander {
|
||||
0% { translate: 0 0; }
|
||||
25% { translate: 38px -26px; }
|
||||
50% { translate: -20px 16px; }
|
||||
75% { translate: 26px 30px; }
|
||||
100% { translate: -14px -18px; }
|
||||
}
|
||||
|
||||
/* (j) Wandering light sweep */
|
||||
.bg-light-sweep {
|
||||
position: absolute;
|
||||
@@ -610,6 +673,15 @@ html.theme-light .bg-mist {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html.theme-light .bg-dusk-tint {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html.theme-light .godray {
|
||||
filter: blur(12px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
html.theme-light .bg-grain {
|
||||
opacity: 0.035;
|
||||
}
|
||||
|
||||
+24
-14
@@ -215,11 +215,19 @@
|
||||
<a class="skip-link" href="#main-content">Skip to main content</a>
|
||||
|
||||
<div class="bg-nature" aria-hidden="true">
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
<div class="bg-dusk-tint"></div>
|
||||
<div class="bg-depth-day">
|
||||
<div class="bg-godrays">
|
||||
<span class="godray godray-1"></span>
|
||||
<span class="godray godray-2"></span>
|
||||
<span class="godray godray-3"></span>
|
||||
</div>
|
||||
<div class="bg-canopy"></div>
|
||||
<span class="canopy-arc canopy-arc-1"></span>
|
||||
<span class="canopy-arc canopy-arc-2"></span>
|
||||
<span class="canopy-arc canopy-arc-3"></span>
|
||||
<span class="canopy-arc canopy-arc-4"></span>
|
||||
</div>
|
||||
<div id="bamboo-far">
|
||||
<span class="bamboo-stalk far-1"></span>
|
||||
<span class="bamboo-stalk far-2"></span>
|
||||
@@ -252,15 +260,17 @@
|
||||
<span class="bg-grass bg-grass-2"></span>
|
||||
<span class="bg-grass bg-grass-3"></span>
|
||||
<span class="bg-grass bg-grass-4"></span>
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
<div class="bg-depth-dusk">
|
||||
<div class="bg-mist bg-mist-1"></div>
|
||||
<div class="bg-mist bg-mist-2"></div>
|
||||
<div class="bg-horizon"></div>
|
||||
<span class="firefly firefly-1"></span>
|
||||
<span class="firefly firefly-2"></span>
|
||||
<span class="firefly firefly-3"></span>
|
||||
<span class="firefly firefly-4"></span>
|
||||
<span class="firefly firefly-5"></span>
|
||||
<span class="firefly firefly-6"></span>
|
||||
</div>
|
||||
<div class="bg-light-sweep"></div>
|
||||
<div class="bg-grain"></div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user