gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-09-04 06:55:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix bamboo parallax direction: layers follow the scroll, not oppose it

Browse Source 
Scrolling down now moves all bamboo layers up-screen with the content
(near fastest, far slowest) instead of pushing them down against it.
Vertical overscan flipped from top (-70%) to bottom (-40%) so the
upward drift never exposes a gap at the viewport bottom.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
KoalaDev
2026-07-11 10:20:38 +02:00
parent 8175f82f0b
commit fecaa8b54d
2 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/app.js
+7 -8
View File
@@ -266,15 +266,14 @@ document.addEventListener('DOMContentLoaded', () => {
const doc = document.documentElement; const doc = document.documentElement;
const maxScroll = Math.max(1, doc.scrollHeight - window.innerHeight); const maxScroll = Math.max(1, doc.scrollHeight - window.innerHeight);
const depth = Math.min(1, window.scrollY / maxScroll); const depth = Math.min(1, window.scrollY / maxScroll);
// Couple the forest directly to the scroll distance so it visibly // Couple the forest directly to the scroll distance. The layers
// travels down instead of being overpowered by upward-moving content. // follow the content's direction (up-screen while scrolling down)
// but slower — near fastest, far slowest — so the forest recedes
// with believable depth instead of moving against the page.
const shift = Math.min(window.innerHeight * 0.55, window.scrollY * 0.14); const shift = Math.min(window.innerHeight * 0.55, window.scrollY * 0.14);
// All bamboo layers travel in the same vertical direction. Depth bambooFar.style.transform = `translate(${(-mouseX * 5).toFixed(1)}px, ${(-shift * 0.42).toFixed(1)}px)`;
// comes from their different speeds; reversing one layer makes bambooNear.style.transform = `translate(${(mouseX * 11).toFixed(1)}px, ${(-shift).toFixed(1)}px)`;
// the forest look mechanically disconnected while scrolling. if (bambooMid) bambooMid.style.transform = `translate(${(mouseX * 4).toFixed(1)}px, ${(-shift * 0.7).toFixed(1)}px)`;
bambooFar.style.transform = `translate(${(-mouseX * 5).toFixed(1)}px, ${(shift * 0.42).toFixed(1)}px)`;
bambooNear.style.transform = `translate(${(mouseX * 11).toFixed(1)}px, ${shift.toFixed(1)}px)`;
if (bambooMid) bambooMid.style.transform = `translate(${(mouseX * 4).toFixed(1)}px, ${(shift * 0.7).toFixed(1)}px)`;
if (depthDay) depthDay.style.transform = `translate(${(-mouseX * 2.5).toFixed(1)}px, ${(mouseY * 1.5).toFixed(1)}px)`; if (depthDay) depthDay.style.transform = `translate(${(-mouseX * 2.5).toFixed(1)}px, ${(mouseY * 1.5).toFixed(1)}px)`;
if (depthDay) depthDay.style.opacity = (1 - depth * 0.75).toFixed(3); if (depthDay) depthDay.style.opacity = (1 - depth * 0.75).toFixed(3);
if (depthDusk) depthDusk.style.opacity = (0.35 + depth * 0.65).toFixed(3); if (depthDusk) depthDusk.style.opacity = (0.35 + depth * 0.65).toFixed(3);
website/style.css
+7 -6
View File
@@ -163,9 +163,10 @@ body {
#bamboo-far .bamboo-stalk { #bamboo-far .bamboo-stalk {
position: absolute; position: absolute;
/* 200% covers the parallax drift (max 0.55vh down) with margin while /* 200% covers the upward parallax drift (max 0.55vh on the near layer)
keeping the blurred layer 17% smaller than the old 240% overscan. */ with margin while keeping the blurred layer smaller than the old
top: -70%; 240% overscan. Spare coverage sits below, where the drift needs it. */
top: -40%;
height: 200%; height: 200%;
border-radius: 999px; border-radius: 999px;
filter: blur(4.5px); filter: blur(4.5px);
@@ -193,7 +194,7 @@ body {
#bamboo-far::after { #bamboo-far::after {
content: ''; content: '';
position: absolute; position: absolute;
top: -70%; top: -40%;
height: 200%; height: 200%;
border-radius: 999px; border-radius: 999px;
filter: blur(6.5px); filter: blur(6.5px);
@@ -221,7 +222,7 @@ body {
#bamboo-mid .bamboo-stalk { #bamboo-mid .bamboo-stalk {
position: absolute; position: absolute;
top: -70%; top: -40%;
height: 200%; height: 200%;
border-radius: 999px; border-radius: 999px;
filter: blur(2px); filter: blur(2px);
@@ -283,7 +284,7 @@ body {
#bamboo-near .bamboo-stalk { #bamboo-near .bamboo-stalk {
position: absolute; position: absolute;
top: -70%; top: -40%;
height: 200%; height: 200%;
border-radius: 999px; border-radius: 999px;
/* Vertical sheen over the culm gradient: reads as light from the /* Vertical sheen over the culm gradient: reads as light from the