Remove background mouse pan effect

This commit is contained in:
2026-02-04 14:38:15 +01:00
parent f6341ac0af
commit bf1ceba156
3 changed files with 3 additions and 49 deletions

View File

@@ -2,7 +2,7 @@ import { api, adminApi } from "./js/api.js";
import { t, setLanguage, getLanguage, initI18n, onLanguageChange } from "./js/i18n.js"; import { t, setLanguage, getLanguage, initI18n, onLanguageChange } from "./js/i18n.js";
import { state, clearUserState, getSavedUsername, setSavedUsername } from "./js/state.js"; import { state, clearUserState, getSavedUsername, setSavedUsername } from "./js/state.js";
import { $, toast } from "./js/dom.js"; import { $, toast } from "./js/dom.js";
import { setupBackgroundPan, triggerCelebration } from "./js/effects.js"; import { triggerCelebration } from "./js/effects.js";
import { import {
setAuthUI, setAuthUI,
setAuthMode, setAuthMode,
@@ -28,7 +28,6 @@ import {
} from "./js/data.js"; } from "./js/data.js";
initI18n(); initI18n();
setupBackgroundPan({ maxOffsetPx: 5, ease: 0.2, scaleFactor: 1.02 });
function setupHandlers() { function setupHandlers() {
const toggleAuth = $("auth-toggle"); const toggleAuth = $("auth-toggle");

41
wwwroot/js/effects.js vendored
View File

@@ -1,43 +1,4 @@
import { toast } from "./dom.js"; // Effects & helpers --------------------------------------------------
import { t } from "./i18n.js";
// Background parallax ------------------------------------------------
export function setupBackgroundPan(config = {}) {
const root = document.documentElement;
const maxOffset = config.maxOffsetPx ?? 30;
const ease = config.ease ?? 0.08;
const scaleFactor = config.scaleFactor ?? 1.12;
if (scaleFactor) {
root.style.setProperty("--bg-scale", scaleFactor);
}
let targetX = 0;
let targetY = 0;
let currX = 0;
let currY = 0;
const setTarget = (x, y) => {
targetX = x;
targetY = y;
};
const step = () => {
currX += (targetX - currX) * ease;
currY += (targetY - currY) * ease;
root.style.setProperty("--bg-x", `${currX}px`);
root.style.setProperty("--bg-y", `${currY}px`);
requestAnimationFrame(step);
};
window.addEventListener("mousemove", (e) => {
const nx = (e.clientX / window.innerWidth - 0.5) * 2;
const ny = (e.clientY / window.innerHeight - 0.5) * 2;
setTarget(-nx * maxOffset, -ny * maxOffset);
});
window.addEventListener("mouseleave", () => setTarget(0, 0));
window.addEventListener("blur", () => setTarget(0, 0));
step();
}
// Screenshot hover --------------------------------------------------- // Screenshot hover ---------------------------------------------------
export function setupCardVisualHover(el, url) { export function setupCardVisualHover(el, url) {

View File

@@ -7,9 +7,6 @@
-apple-system, -apple-system,
sans-serif; sans-serif;
color: #2c1c0d; color: #2c1c0d;
--bg-scale: 1.0;
--bg-x: 0px;
--bg-y: 0px;
} }
html { html {
@@ -43,11 +40,8 @@ html {
background-image: url("background.png"); background-image: url("background.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: calc(50% + var(--bg-x)) calc(50% + var(--bg-y)); background-position: center;
transform: scale(var(--bg-scale));
transform-origin: center;
z-index: -1; z-index: -1;
will-change: transform, background-position;
pointer-events: none; pointer-events: none;
} }