jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(player): add mobile animation

Browse source
This commit is contained in:
sylenien 2022-12-13 16:55:15 +01:00 • committed by Delirium
parent 3a5a4e1472
commit f368ab624e
2 changed files with 47 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/app/player/web/Screen/Cursor.ts
View file

@ -5,11 +5,14 @@ import styles from './cursor.module.css';
export default class Cursor {
private readonly cursor: HTMLDivElement;
private tagElement: HTMLDivElement;
private isMobile: boolean;
constructor(overlay: HTMLDivElement, isMobile: boolean) {
this.cursor = document.createElement('div');
this.cursor.className = styles.cursor;
if (isMobile) this.cursor.style.backgroundImage = 'unset'
overlay.appendChild(this.cursor);
this.isMobile = isMobile;
}
toggle(flag: boolean) {
@ -52,9 +55,10 @@ export default class Cursor {
}
click() {
this.cursor.classList.add(styles.clicked)
const styleList = this.isMobile ? styles.clickedMobile : styles.clicked
this.cursor.classList.add(styleList)
setTimeout(() => {
this.cursor.classList.remove(styles.clicked)
this.cursor.classList.remove(styleList)
}, 600)
}

41
frontend/app/player/web/Screen/cursor.module.css
View file

@ -67,3 +67,44 @@
transform: scale3d(1.2, 1.2, 1);
}
}
.cursor.clickedMobile::after {
-webkit-animation: anim-effect-sanja 1s ease-out forwards;
animation: anim-effect-sanja 1s ease-out forwards;
}
@-webkit-keyframes anim-effect-sanja {
0% {
opacity: 1;
-webkit-transform: scale3d(0.5, 0.5, 1);
transform: scale3d(0.5, 0.5, 1);
}
25% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
100% {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes anim-effect-sanja {
0% {
opacity: 1;
-webkit-transform: scale3d(0.5, 0.5, 1);
transform: scale3d(0.5, 0.5, 1);
}
25% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
100% {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}