82 lines
2.3 KiB
Svelte
82 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
|
|
// Params
|
|
let mouseMoveDevider = 1.5;
|
|
|
|
// Site variables
|
|
let mouseX = 0;
|
|
let mouseY = 0;
|
|
|
|
// Element binded variables
|
|
let animatedTopBackgroundX = 0;
|
|
let animatedTopBackgroundY = 0;
|
|
|
|
let StartPageAnimated: Element;
|
|
|
|
function handleMouseMove(event: MouseEvent) {
|
|
// Calculate the mouse position relative to the center of the div
|
|
const centerX = StartPageAnimated.clientWidth / 2;
|
|
const centerY = StartPageAnimated.clientHeight / 2;
|
|
|
|
mouseX = event.clientX;
|
|
mouseY = event.clientY;
|
|
|
|
animatedTopBackgroundX = mouseX - StartPageAnimated.clientLeft - centerX;
|
|
animatedTopBackgroundY = mouseY - StartPageAnimated.clientTop - centerY;
|
|
|
|
//console.log(mouseX+"\n"+mouseY);
|
|
}
|
|
|
|
// let windowWidth = window.innerWidth;
|
|
// let windowHeight = window.innerHeight;
|
|
|
|
// // Update window dimensions on mount
|
|
// onMount(() => {
|
|
// const updateDimensions = () => {
|
|
// windowWidth = window.innerWidth;
|
|
// windowHeight = window.innerHeight;
|
|
// };
|
|
|
|
// window.addEventListener('resize', updateDimensions);
|
|
|
|
// return () => {
|
|
// window.removeEventListener('resize', updateDimensions);
|
|
// };
|
|
// });
|
|
</script>
|
|
|
|
<svelte:body on:mousemove={handleMouseMove}/>
|
|
|
|
<div class="StartPageContainer">
|
|
|
|
<div class="StartPageAnimated" bind:this={StartPageAnimated} style="transform: translate({animatedTopBackgroundX}px, {animatedTopBackgroundY}px);">
|
|
<span class="rotate45" style="display: flex; justify-content: center; align-items: center;">TEXT!!!</span>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.StartPageContainer{
|
|
height: 40vh;
|
|
|
|
background-color: burlywood;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.StartPageAnimated{
|
|
background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$");
|
|
position: static;
|
|
height: 100vh;
|
|
height: 100vw;
|
|
|
|
transition: all 1000ms cubic-bezier(0.16,1.63,0.01,0.99);
|
|
|
|
justify-content: center;
|
|
vertical-align: middle;
|
|
display: flex;
|
|
}
|
|
|
|
.rotate45 {
|
|
transform: rotate(-45deg); /* Rotate the element by 45 degrees */
|
|
}
|
|
</style> |