xTr1m/GameList
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Invert parallax and keep background aspect

Browse Source
This commit is contained in:
Frank Tovar
2026-02-03 01:17:57 +01:00
parent bb810584ee
commit 64f5b76362
2 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
wwwroot/app.js
View File

@@ -841,8 +841,9 @@ function setupBackgroundPan(config = {}) {
const root = document.documentElement; const root = document.documentElement;
const maxOffset = config.maxOffsetPx ?? 30; const maxOffset = config.maxOffsetPx ?? 30;
const ease = config.ease ?? 0.08; const ease = config.ease ?? 0.08;
if (config.scalePercent) { const scaleFactor = config.scaleFactor ?? 1.12;
root.style.setProperty("--bg-scale", config.scalePercent); if (scaleFactor) {
root.style.setProperty("--bg-scale", scaleFactor);
} }
let targetX = 0; let targetX = 0;
let targetY = 0; let targetY = 0;
@@ -865,7 +866,7 @@ function setupBackgroundPan(config = {}) {
window.addEventListener("mousemove", (e) => { window.addEventListener("mousemove", (e) => {
const nx = (e.clientX / window.innerWidth - 0.5) * 2; const nx = (e.clientX / window.innerWidth - 0.5) * 2;
const ny = (e.clientY / window.innerHeight - 0.5) * 2; const ny = (e.clientY / window.innerHeight - 0.5) * 2;
setTarget(nx * maxOffset, ny * maxOffset); setTarget(-nx * maxOffset, -ny * maxOffset);
}); });
window.addEventListener("mouseleave", () => setTarget(0, 0)); window.addEventListener("mouseleave", () => setTarget(0, 0));
@@ -934,7 +935,7 @@ function scoreToEmoji(score) {
} }
function neutralEmoji() { function neutralEmoji() {
return "😐"; return "⬅️";
} }
function signatureSuggestions(list) { function signatureSuggestions(list) {

16
wwwroot/styles.css
View File

@@ -8,7 +8,7 @@
sans-serif; sans-serif;
background: #f6e9d6; background: #f6e9d6;
color: #2c1c0d; color: #2c1c0d;
--bg-scale: 115%; --bg-scale: 1.12;
--bg-x: 0px; --bg-x: 0px;
--bg-y: 0px; --bg-y: 0px;
} }
@@ -28,11 +28,21 @@
gap: 16px; gap: 16px;
min-height: 100vh; min-height: 100vh;
background-color: #f6e9d6; background-color: #f6e9d6;
position: relative;
overflow: hidden;
}
.page::before {
content: "";
position: fixed;
inset: 0;
background-image: url("background.png"); background-image: url("background.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; background-size: cover;
background-size: var(--bg-scale) var(--bg-scale);
background-position: calc(50% + var(--bg-x)) calc(50% + var(--bg-y)); background-position: calc(50% + var(--bg-x)) calc(50% + var(--bg-y));
transform: scale(var(--bg-scale));
transform-origin: center;
z-index: -1;
will-change: transform, background-position;
} }
.lang-field { .lang-field {