jonasjones.dev/src/components/ParallaxBg.svelte

47 lines
No EOL
1.3 KiB
Svelte

<script>
let mouseX = 0;
let mouseY = 0;
/**
* @param {{ clientX: number; clientY: number; }} event
*/
function handleMouseMove(event) {
mouseX = event.clientX;
mouseY = event.clientY;
}
</script>
<style>
@import '../routes/+page.css';
.container {
min-height: 100vh;
position: relative;
overflow: hidden; /* Ensure the background image does not overflow */
}
.parallax-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/ricky.webp');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
@media only screen and (min-width: 768px) {
transform: translateX(calc(-1 * var(--mouse-x) / 50)) translateY(calc(-1 * var(--mouse-y) / 50));
}
z-index: -1; /* Place the background behind other content */
}
</style>
<main class="container" on:mousemove={handleMouseMove}>
<div class="parallax-background" style="--mouse-x: {mouseX}px; --mouse-y: {mouseY}px;">
<img src="/ricky.webp" width="102%" height="101%" alt="Parallax Background" class="parallax-image">
</div>
<!-- Your main content goes here -->
<slot></slot>
</main>