59 lines
1.1 KiB
Svelte
59 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import { createLeaves, setRotation } from "./leaves";
|
|
import { Color } from "ogl";
|
|
import { rgbToHex } from "@helpers/colors";
|
|
import { colors } from "@helpers/colors";
|
|
|
|
let canvas: HTMLCanvasElement;
|
|
|
|
let loaded = false;
|
|
|
|
function handleScroll() {
|
|
setRotation(window.scrollY / window.innerHeight);
|
|
}
|
|
|
|
const color = new Color("#000000");
|
|
|
|
function updateColor(c: string) {
|
|
const d = new Color(rgbToHex(c));
|
|
color.set(d.r, d.g, d.b);
|
|
}
|
|
|
|
$: if ($colors.background) {
|
|
updateColor($colors.background);
|
|
}
|
|
|
|
onMount(() => {
|
|
createLeaves({ canvas, num: 40, minZ: 0, maxZ: 1, color });
|
|
setTimeout(() => {
|
|
loaded = true;
|
|
}, 100);
|
|
});
|
|
</script>
|
|
|
|
<svelte:window on:scroll={handleScroll} />
|
|
|
|
<canvas bind:this={canvas} class:loaded />
|
|
|
|
<style>
|
|
:global(body) {
|
|
z-index: 1;
|
|
}
|
|
canvas {
|
|
width: 100vw !important;
|
|
height: 100vh !important;
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 4s;
|
|
}
|
|
|
|
.loaded {
|
|
opacity: 0.6;
|
|
}
|
|
</style>
|