Remove background mouse pan effect
This commit is contained in:
@@ -2,7 +2,7 @@ import { api, adminApi } from "./js/api.js";
|
||||
import { t, setLanguage, getLanguage, initI18n, onLanguageChange } from "./js/i18n.js";
|
||||
import { state, clearUserState, getSavedUsername, setSavedUsername } from "./js/state.js";
|
||||
import { $, toast } from "./js/dom.js";
|
||||
import { setupBackgroundPan, triggerCelebration } from "./js/effects.js";
|
||||
import { triggerCelebration } from "./js/effects.js";
|
||||
import {
|
||||
setAuthUI,
|
||||
setAuthMode,
|
||||
@@ -28,7 +28,6 @@ import {
|
||||
} from "./js/data.js";
|
||||
|
||||
initI18n();
|
||||
setupBackgroundPan({ maxOffsetPx: 5, ease: 0.2, scaleFactor: 1.02 });
|
||||
|
||||
function setupHandlers() {
|
||||
const toggleAuth = $("auth-toggle");
|
||||
|
||||
41
wwwroot/js/effects.js
vendored
41
wwwroot/js/effects.js
vendored
@@ -1,43 +1,4 @@
|
||||
import { toast } from "./dom.js";
|
||||
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();
|
||||
}
|
||||
// Effects & helpers --------------------------------------------------
|
||||
|
||||
// Screenshot hover ---------------------------------------------------
|
||||
export function setupCardVisualHover(el, url) {
|
||||
|
||||
@@ -7,9 +7,6 @@
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
color: #2c1c0d;
|
||||
--bg-scale: 1.0;
|
||||
--bg-x: 0px;
|
||||
--bg-y: 0px;
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -43,11 +40,8 @@ html {
|
||||
background-image: url("background.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: calc(50% + var(--bg-x)) calc(50% + var(--bg-y));
|
||||
transform: scale(var(--bg-scale));
|
||||
transform-origin: center;
|
||||
background-position: center;
|
||||
z-index: -1;
|
||||
will-change: transform, background-position;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user