Sveskejuice
/
deprived-main-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ZhenPort: Fixed a bug

This commit is contained in:
BOTAlex 2024-03-31 03:50:29 +02:00
parent 8ed6d26c40
commit e75b6358ef
3 changed files with 132 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/routes/zhen/+page.svelte
View File

@ -1,108 +1,5 @@
<script lang="ts">
import { onMount } from "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);
};
});
import TopAnimatedBackground from "./Comps/TopAnimatedBackground.svelte";
</script>
<svelte:window on:mousemove={onMouseMoved} />
<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>
<TopAnimatedBackground/>

109
src/routes/zhen/Comps/TopAnimatedBackground.svelte Normal file
View File

@ -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>

21
src/routes/zhen/Utils/Throttle.js Normal file
View File

@ -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));
}
};
}