dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

FEAT: Floating Effect

Browse Source 
Implemented Floating Effect on AuthModel, need further adjustments
This commit is contained in:
EvanLin3141
2025-01-30 00:52:39 +00:00
parent 92f691b6bd
commit 17ab2743de
2 changed files with 20 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/Auth/AuthModal.tsx
View File

@@ -29,7 +29,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
{/*Container*/}
<div
className="container fixed inset-0 flex flex-col items-center justify-around z-50
h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem] transition-all"
h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem] transition-all animate-floating"
style={{ "--spin-duration": spinDuration } as React.CSSProperties}
>

20
frontend/tailwind.config.js
View File

@@ -12,7 +12,8 @@ export default {
animation: {
moving_text_colour: "moving_text_colour 6s ease-in-out infinite alternate",
moving_bg: 'moving_bg 200s linear infinite',
'border-spin': 'border-spin linear infinite', // No duration here
'border-spin': 'border-spin linear infinite',
floating: "floating 30s linear infinite"
},
@@ -30,6 +31,23 @@ export default {
'100%': { backgroundPosition: '100% 0%' },
}
},
floating: {
'0%': { transform: 'translate(0px, -5px) rotateX(0deg) rotateY(0deg)' },
'5%': { transform: 'translate(-3px, -5.5px) rotateX(-0.35deg) rotateY(-0.55deg)' },
'10%': { transform: 'translate(-9px, -6.15px) rotateX(-1.1deg) rotateY(-1.23deg)' },
'13%': { transform: 'translate(-12px, -5.5px) rotateX(-1.9deg) rotateY(-1.34deg)' },
//Top Left
'20%': { transform: 'translate(-10px, -7px) rotateX(-2.5deg) rotateY(-1.5deg)' },
'25%': { transform: 'translate(-6px, -5px) rotateX(-1.75deg) rotateY(-0.65deg)' },
'30%': { transform: 'translate(-4px, -1px) rotateX(0.45deg) rotateY(-0.45deg)' },
'35%': { transform: 'translate(-7px, 4px) rotateX(1.85deg) rotateY(-1.5deg)' },
//Bottom Left
'40%': { transform: 'translate(-10px, 7px) rotateX(2.5deg) rotateY(-1.5deg)' }, /* Bottom-left tilt */
'60%': { transform: 'translate(10px, 7px) rotateX(2.5deg) rotateY(1.5deg)' }, /* Bottom-right tilt */
'80%': { transform: 'translate(10px, -7px) rotateX(-2.5deg) rotateY(1.5deg)' }, /* Top-right tilt */
'100%': { transform: 'translate(0px, -5px) rotateX(0deg) rotateY(0deg)' },
},
},
},
plugins: [