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 { 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
41
wwwroot/js/effects.js
vendored
@@ -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) {
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user