ZhenPort: Fixed a bug
This commit is contained in:
parent
8ed6d26c40
commit
e75b6358ef
|
|
@ -1,108 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from "svelte";
|
import TopAnimatedBackground from "./Comps/TopAnimatedBackground.svelte";
|
||||||
import { Vector2 } from "./Utils/Vector2";
|
|
||||||
|
|
||||||
// Params
|
|
||||||
let mouseMoveScale: number = 0.5;
|
|
||||||
|
|
||||||
// Site variables
|
|
||||||
let mousePos: Vector2;
|
|
||||||
|
|
||||||
// Element binded variables
|
|
||||||
let mouseRelativeScaled: Vector2 = new Vector2(0, 0);
|
|
||||||
|
|
||||||
let windowWidth = 0;
|
|
||||||
let windowHeight = 0;
|
|
||||||
|
|
||||||
let screenCenter: Vector2;
|
|
||||||
|
|
||||||
let StartPageAnimated: Element;
|
|
||||||
let windowRef: Window;
|
|
||||||
|
|
||||||
function onMouseMoved(event: MouseEvent) {
|
|
||||||
mousePos = new Vector2(event.clientX, event.clientY);
|
|
||||||
|
|
||||||
updateAnimation(mousePos);
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateAnimation(mousePos: Vector2) {
|
|
||||||
let mouseRelativePos = mousePos.Sub(screenCenter);
|
|
||||||
mouseRelativeScaled = mouseRelativePos.Scale(mouseMoveScale);
|
|
||||||
|
|
||||||
//console.log(mouseRelativePos.x+"\n"+mouseRelativePos.y);
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
windowRef = window;
|
|
||||||
|
|
||||||
const updateDimensions = () => {
|
|
||||||
windowWidth = windowRef.innerWidth;
|
|
||||||
windowHeight = windowRef.innerHeight;
|
|
||||||
|
|
||||||
screenCenter = new Vector2(windowWidth / 2, windowHeight / 2);
|
|
||||||
|
|
||||||
//console.log("Window size changed: (" + windowWidth + ", " + windowHeight + ")");
|
|
||||||
};
|
|
||||||
|
|
||||||
updateDimensions(); // On first pass
|
|
||||||
|
|
||||||
windowRef.addEventListener("resize", updateDimensions);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
windowRef.removeEventListener("resize", updateDimensions);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:window on:mousemove={onMouseMoved} />
|
<TopAnimatedBackground/>
|
||||||
|
|
||||||
<div class="StartPageContainer">
|
|
||||||
<div
|
|
||||||
class="StartPageAnimated"
|
|
||||||
bind:this={StartPageAnimated}
|
|
||||||
style="transform: translate(calc({mouseRelativeScaled.x}px), {mouseRelativeScaled.y}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;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.StartPageAnimated {
|
|
||||||
background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$");
|
|
||||||
background-color: aqua;
|
|
||||||
position: absolute;
|
|
||||||
height: 150vh;
|
|
||||||
width: 150vw;
|
|
||||||
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
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>
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
import { Vector2 } from "./../Utils/Vector2";
|
||||||
|
//import { throttle } from "./../Utils/Throttle";
|
||||||
|
|
||||||
|
// Params
|
||||||
|
let mouseMoveScale: number = 0.25;
|
||||||
|
|
||||||
|
// Site variables
|
||||||
|
let mousePos: Vector2;
|
||||||
|
|
||||||
|
// Element binded variables
|
||||||
|
let mouseRelativeScaled: Vector2 = new Vector2(0, 0);
|
||||||
|
|
||||||
|
let windowWidth = 0;
|
||||||
|
let windowHeight = 0;
|
||||||
|
|
||||||
|
let screenCenter: Vector2;
|
||||||
|
|
||||||
|
let StartPageAnimated: Element;
|
||||||
|
let windowRef: Window;
|
||||||
|
|
||||||
|
function onMouseMoved(event: MouseEvent) {
|
||||||
|
mousePos = new Vector2(event.clientX, event.clientY);
|
||||||
|
|
||||||
|
updateAnimation(mousePos);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateAnimation(mousePos: Vector2) {
|
||||||
|
let mouseRelativePos = mousePos.Sub(screenCenter);
|
||||||
|
mouseRelativeScaled = mouseRelativePos.Scale(mouseMoveScale);
|
||||||
|
|
||||||
|
//console.log(mouseRelativePos.x+"\n"+mouseRelativePos.y);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
windowRef = window;
|
||||||
|
|
||||||
|
const updateDimensions = () => {
|
||||||
|
windowWidth = windowRef.innerWidth;
|
||||||
|
windowHeight = windowRef.innerHeight;
|
||||||
|
|
||||||
|
screenCenter = new Vector2(windowWidth / 2, windowHeight / 2);
|
||||||
|
|
||||||
|
//console.log("Window size changed: (" + windowWidth + ", " + windowHeight + ")");
|
||||||
|
};
|
||||||
|
|
||||||
|
updateDimensions(); // On first pass
|
||||||
|
|
||||||
|
windowRef.addEventListener("resize", updateDimensions);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
windowRef.removeEventListener("resize", updateDimensions);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:window on:mousemove={onMouseMoved} />
|
||||||
|
|
||||||
|
<div class="StartPageContainer">
|
||||||
|
<div
|
||||||
|
class="StartPageAnimated"
|
||||||
|
bind:this={StartPageAnimated}
|
||||||
|
style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}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;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.StartPageAnimated {
|
||||||
|
background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$");
|
||||||
|
background-color: aqua;
|
||||||
|
position: absolute;
|
||||||
|
height: 150vh;
|
||||||
|
width: 150vw;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
export function throttle(callback, wait) {
|
||||||
|
let timeoutId = null;
|
||||||
|
let lastExecutedTime = 0;
|
||||||
|
|
||||||
|
return function (...args) {
|
||||||
|
const currentTime = Date.now();
|
||||||
|
|
||||||
|
const execute = () => {
|
||||||
|
lastExecutedTime = currentTime;
|
||||||
|
callback.apply(this, args);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (currentTime - lastExecutedTime >= wait) {
|
||||||
|
execute();
|
||||||
|
} else {
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
timeoutId = setTimeout(execute, wait - (currentTime - lastExecutedTime));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue