light7734/bonfire
1
1
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Wiki Activity

refactor: tiltcard

Browse source
This commit is contained in:
light7734 2025-10-13 22:18:54 +03:30
parent 9c97c6aeab
commit c009db7bbe
Signed by: light7734
GPG key ID: 8C30176798F1A6BA
1 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/routes/tiltcard.svelte
View file

@ -5,13 +5,13 @@
export let height: string = '400px'; export let height: string = '400px';
let cardElement: HTMLDivElement; let cardElement: HTMLDivElement;
let rotateX = 0; let rotateX = -10;
let rotateY = 0; let rotateY = 5;
let isHovered = false; let isHovered = false;
// Derived shadow offsets // Derived shadow offsets
let shadowX = 0; let shadowX = -rotateY * 0.7;
let shadowY = 0; let shadowY = rotateX * 0.7;
let shadowBlur = 20; let shadowBlur = 20;
function handleMouseMove(event: MouseEvent) { function handleMouseMove(event: MouseEvent) {
@ -39,16 +39,16 @@
function handleMouseLeave() { function handleMouseLeave() {
isHovered = false; isHovered = false;
rotateX = 0; rotateX = -10;
rotateY = 0; rotateY = 5;
shadowX = 0; shadowX = -rotateY * 0.7;
shadowY = 0; shadowY = rotateX * 0.7;
} }
</script> </script>
<div <div
bind:this={cardElement} bind:this={cardElement}
class="cursor-pointer" class="cursor-pointer duration-100"
class:scale-[1.03]={isHovered} class:scale-[1.03]={isHovered}
style=" style="
width: {width}; width: {width};