mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
added check for layers
This commit is contained in:
parent
cb1940586c
commit
4dc9e34957
2 changed files with 15 additions and 4 deletions
|
@ -8,6 +8,8 @@ import React, {
|
||||||
useState,
|
useState,
|
||||||
} from "react";
|
} from "react";
|
||||||
|
|
||||||
|
import { useWindowSize } from "~/hooks/dom/useWindowSize";
|
||||||
|
|
||||||
import styles from "./styles.module.scss";
|
import styles from "./styles.module.scss";
|
||||||
|
|
||||||
interface LoginSceneProps {}
|
interface LoginSceneProps {}
|
||||||
|
@ -55,6 +57,7 @@ const layers: Layer[] = [
|
||||||
const LoginScene: FC<LoginSceneProps> = memo(() => {
|
const LoginScene: FC<LoginSceneProps> = memo(() => {
|
||||||
const ref = useRef<HTMLDivElement>(null);
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
const [loaded, setLoaded] = useState(false);
|
const [loaded, setLoaded] = useState(false);
|
||||||
|
const { isMobile } = useWindowSize();
|
||||||
|
|
||||||
const onMouseMove = useCallback(
|
const onMouseMove = useCallback(
|
||||||
(event: MouseEvent): any => {
|
(event: MouseEvent): any => {
|
||||||
|
@ -67,9 +70,13 @@ const LoginScene: FC<LoginSceneProps> = memo(() => {
|
||||||
const shift = event.pageX / middle / 2 - 0.5;
|
const shift = event.pageX / middle / 2 - 0.5;
|
||||||
|
|
||||||
layers.map((it, index) => {
|
layers.map((it, index) => {
|
||||||
document.getElementById(
|
const target = document.getElementById(`LoginScene__${index}`);
|
||||||
`LoginScene__${index}`,
|
|
||||||
)?.style.transform = `translate(${shift * it.velocity * 200}px, 0)`;
|
if (target) {
|
||||||
|
target.style.transform = `translate(${shift *
|
||||||
|
it.velocity *
|
||||||
|
200}px, 0)`;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
[ref],
|
[ref],
|
||||||
|
@ -80,6 +87,10 @@ const LoginScene: FC<LoginSceneProps> = memo(() => {
|
||||||
return () => document.removeEventListener("mousemove", onMouseMove);
|
return () => document.removeEventListener("mousemove", onMouseMove);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.scene} ref={ref}>
|
<div className={styles.scene} ref={ref}>
|
||||||
<svg
|
<svg
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue