feat: update some stuff
This commit is contained in:
parent
40232189a0
commit
dfd5e79246
72
package.json
72
package.json
@ -1,38 +1,38 @@
|
||||
{
|
||||
"name": "silvester-24",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
||||
"format": "prettier --plugin-search-dir . --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^2.0.0",
|
||||
"@sveltejs/kit": "^1.20.4",
|
||||
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
||||
"@typescript-eslint/parser": "^6.0.0",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-svelte": "^2.30.0",
|
||||
"prettier": "^2.8.0",
|
||||
"prettier-plugin-svelte": "^2.10.1",
|
||||
"svelte": "^4.0.5",
|
||||
"svelte-check": "^3.4.3",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^4.4.2"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@sveltejs/adapter-node": "^1.3.1",
|
||||
"svelte-particles": "^2.12.0",
|
||||
"tsparticles": "^2.12.0",
|
||||
"tsparticles-confetti": "^2.12.0",
|
||||
"tsparticles-slim": "^2.12.0"
|
||||
}
|
||||
"name": "silvester-24",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev --port 8080 --host",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
||||
"format": "prettier --plugin-search-dir . --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^2.0.0",
|
||||
"@sveltejs/kit": "^1.20.4",
|
||||
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
||||
"@typescript-eslint/parser": "^6.0.0",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-svelte": "^2.30.0",
|
||||
"prettier": "^2.8.0",
|
||||
"prettier-plugin-svelte": "^2.10.1",
|
||||
"svelte": "^4.0.5",
|
||||
"svelte-check": "^3.4.3",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^4.4.2"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@sveltejs/adapter-node": "^1.3.1",
|
||||
"svelte-particles": "^2.12.0",
|
||||
"tsparticles": "^2.12.0",
|
||||
"tsparticles-confetti": "^2.12.0",
|
||||
"tsparticles-slim": "^2.12.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,8 @@
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
<script src="https://cdn.jsdelivr.net/npm/tsparticles-confetti@2.12.0/tsparticles.confetti.bundle.min.js"></script>
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/tsparticles-confetti@2.12.0/tsparticles.confetti.bundle.min.js"></script> -->
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Meow+Script&display=swap" rel="stylesheet"> </head>
|
||||
|
||||
@ -16,21 +16,33 @@
|
||||
font-size: 2em;
|
||||
color: #ceba51;
|
||||
background: transparent;
|
||||
filter: drop-shadow(0px 0px 30px #886d2c);
|
||||
/*** Your CSS code ***/
|
||||
border-style: solid;
|
||||
border-width: 30px;
|
||||
border-image: url(/border.png);
|
||||
border-color: transparent;
|
||||
border-image-repeat: stretch;
|
||||
border-image-slice: 100%;
|
||||
border-image-slice: 24% 23%;
|
||||
transition: border-image-slice 0.3s ease, filter 0.3s ease;
|
||||
transition: border-image-slice 0.3s ease;
|
||||
will-change: contents;
|
||||
transform: translateZ(1px);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
filter: drop-shadow(0px 0px 20px #886d2c);
|
||||
border-image-slice: 24% 23%;
|
||||
}
|
||||
|
||||
button::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
box-shadow: 0 0 70px #ffb11b88;
|
||||
top: -15px;
|
||||
left: -15px;
|
||||
z-index: -1;
|
||||
width: calc(100% + 30px);
|
||||
height: calc(100% + 30px);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover::after {
|
||||
box-shadow: 0 0 30px #ffb11b88;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,36 +1,46 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let skew = 1;
|
||||
import { browser } from '$app/environment';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
|
||||
function randomInRange(min: number, max: number) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
function frame() {
|
||||
skew = Math.max(0.8, skew - 0.001);
|
||||
let i = 0;
|
||||
|
||||
confetti({
|
||||
particleCount: 1,
|
||||
startVelocity: 0,
|
||||
origin: {
|
||||
x: Math.random(),
|
||||
// since particles fall down, skew start toward the top
|
||||
y: Math.random() * skew - 0.2
|
||||
},
|
||||
colors: ['#d9c556'],
|
||||
shapes: ['circle'],
|
||||
gravity: randomInRange(0.4, 0.6),
|
||||
scalar: randomInRange(0.4, 1),
|
||||
drift: randomInRange(-0.0, 0.0)
|
||||
});
|
||||
|
||||
requestAnimationFrame(frame);
|
||||
}
|
||||
let f: number;
|
||||
onDestroy(() => {
|
||||
if (browser) {
|
||||
cancelAnimationFrame(f);
|
||||
}
|
||||
});
|
||||
|
||||
onMount(async () => {
|
||||
setTimeout(() => {
|
||||
frame();
|
||||
}, 0);
|
||||
const confetti = (await import('https://esm.run/canvas-confetti')).default;
|
||||
|
||||
function frame() {
|
||||
i = (i + 1) % 1000;
|
||||
if (i % 20 === 0) {
|
||||
confetti({
|
||||
particleCount: 1,
|
||||
startVelocity: 0,
|
||||
useWorker: true,
|
||||
origin: {
|
||||
x: Math.random(),
|
||||
// since particles fall down, skew start toward the top
|
||||
y: Math.random()
|
||||
},
|
||||
colors: ['#d9c556'],
|
||||
shapes: ['circle'],
|
||||
gravity: randomInRange(0.4, 0.6),
|
||||
scalar: randomInRange(0.4, 1),
|
||||
drift: randomInRange(-2, 2),
|
||||
disableForReducedMotion: true
|
||||
});
|
||||
}
|
||||
|
||||
f = requestAnimationFrame(frame);
|
||||
}
|
||||
frame();
|
||||
});
|
||||
</script>
|
||||
|
||||
98
src/lib/components/curtains.svelte
Normal file
98
src/lib/components/curtains.svelte
Normal file
@ -0,0 +1,98 @@
|
||||
<script lang="ts">
|
||||
export let visible = true;
|
||||
</script>
|
||||
|
||||
<div class="background" class:visible>
|
||||
<div class="drapery" />
|
||||
<img
|
||||
alt="curtain left"
|
||||
class="curtain-right"
|
||||
src="/curtain.png"
|
||||
srcset="
|
||||
/curtain.png, <!-- Fallback for browsers that don't support the format -->
|
||||
/curtain.webp 1x, <!-- 1x resolution for browsers that support WebP -->
|
||||
/curtain.webp 2x, <!-- 2x resolution for browsers that support WebP -->
|
||||
/curtain.avif 1x, <!-- 1x resolution for browsers that support AVIF -->
|
||||
/curtain.avif 2x <!-- 2x resolution for browsers that support AVIF -->
|
||||
"
|
||||
/>
|
||||
<img
|
||||
alt="curtain right"
|
||||
class="curtain-left"
|
||||
src="/curtain.png"
|
||||
srcset="
|
||||
/curtain.png, <!-- Fallback for browsers that don't support the format -->
|
||||
/curtain.webp 1x, <!-- 1x resolution for browsers that support WebP -->
|
||||
/curtain.webp 2x, <!-- 2x resolution for browsers that support WebP -->
|
||||
/curtain.avif 1x, <!-- 1x resolution for browsers that support AVIF -->
|
||||
/curtain.avif 2x <!-- 2x resolution for browsers that support AVIF -->
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.background {
|
||||
opacity: 0.9;
|
||||
transition: transform 2s ease;
|
||||
transform: scale(1);
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.drapery {
|
||||
background-image: url('/drapery.avif'), url('/drapery.webp'), url('/drapery.png');
|
||||
background-position: center top;
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
left: 0px;
|
||||
width: 100vw;
|
||||
height: 300px;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 600px 200px;
|
||||
z-index: 3;
|
||||
filter: brightness(1.2) contrast(1.2) saturate(1.3) hue-rotate(-15deg)
|
||||
drop-shadow(0px 0px 50px black);
|
||||
transform: translateY(-500px) scaleY(0);
|
||||
transition: transform 2s ease;
|
||||
}
|
||||
|
||||
.visible .drapery {
|
||||
transform: translateY(0px) scaleY(1);
|
||||
}
|
||||
|
||||
img.curtain-right {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
right: -50px;
|
||||
width: 400px;
|
||||
z-index: 2;
|
||||
filter: brightness(0.8) contrast(1.1) saturate(0.6);
|
||||
animation-delay: 0s;
|
||||
transform: translateX(120%) rotate(-10deg);
|
||||
transition: transform 2s ease;
|
||||
}
|
||||
|
||||
.visible .curtain-right {
|
||||
transform: translateX(0%) rotate(0deg);
|
||||
}
|
||||
|
||||
img.curtain-left {
|
||||
transform: scaleX(-1);
|
||||
position: fixed;
|
||||
top: -30px;
|
||||
left: -50px;
|
||||
width: 400px;
|
||||
z-index: 2;
|
||||
filter: brightness(0.8) contrast(1.1) saturate(0.6);
|
||||
animation-delay: 0s;
|
||||
transform: translateX(-120%) rotate(10deg) scaleX(-1);
|
||||
transition: transform 2s ease;
|
||||
}
|
||||
|
||||
.visible .curtain-left {
|
||||
transform: translateX(0%) rotate(0deg) scaleX(-1);
|
||||
}
|
||||
</style>
|
||||
@ -36,7 +36,7 @@
|
||||
}
|
||||
|
||||
.wrapper > div :global(path) {
|
||||
animation-duration: 5s !important;
|
||||
animation-duration: 8s !important;
|
||||
stroke: #d9c556;
|
||||
}
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
|
||||
div :global(path) {
|
||||
animation-duration: 5s !important;
|
||||
animation-delay: 2s !important;
|
||||
animation-delay: 3s !important;
|
||||
animation-fill-mode: forwards !important;
|
||||
stroke: #d9c556;
|
||||
}
|
||||
|
||||
@ -4,7 +4,10 @@
|
||||
<slot />
|
||||
|
||||
<style global>
|
||||
:global(html) {
|
||||
:global(html, body) {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: black;
|
||||
/* background-image: url(/confetti.png); */
|
||||
background-size: 80%;
|
||||
|
||||
@ -1,60 +1,65 @@
|
||||
<script lang="ts">
|
||||
import Button from '$lib/components/button.svelte';
|
||||
import Confetti from '$lib/components/confetti.svelte';
|
||||
import Curtains from '$lib/components/curtains.svelte';
|
||||
import Mask from '$lib/components/mask.svelte';
|
||||
import Maskenball from '$lib/components/maskenball.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
let curtainsIn = false;
|
||||
let curtainsOut = false;
|
||||
let curtainsVisible = false;
|
||||
let buttonVisible = false;
|
||||
let maskVisible = false;
|
||||
|
||||
onMount(() => {
|
||||
curtainsVisible = true;
|
||||
setTimeout(() => {
|
||||
curtainsIn = true;
|
||||
}, 2000);
|
||||
buttonVisible = true;
|
||||
}, 1500);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="background {curtainsIn ? 'curtains-in' : ''} {curtainsOut ? 'curtains-out' : ''}">
|
||||
<div class="drapery" />
|
||||
<img alt="curtain left" class="curtain-right" src="/curtain.png" />
|
||||
<img alt="curtain right" class="curtain-left" src="/curtain.png" />
|
||||
</div>
|
||||
<Confetti />
|
||||
<div class="mask-anim">
|
||||
<!-- <Mask /> -->
|
||||
</div>
|
||||
<!-- <Maskenball /> -->
|
||||
<Curtains visible={curtainsVisible} />
|
||||
<div class="center">
|
||||
<Button on:click={() => (curtainsOut = true)}>Enter the Dungeon</Button>
|
||||
{#if maskVisible}
|
||||
<Mask />
|
||||
<Maskenball />
|
||||
{/if}
|
||||
|
||||
{#if buttonVisible}
|
||||
<span class="enter-button" class:visible={buttonVisible}>
|
||||
<Button
|
||||
on:click={() => {
|
||||
curtainsVisible = false;
|
||||
buttonVisible = false;
|
||||
setTimeout(() => {
|
||||
maskVisible = true;
|
||||
}, 1000);
|
||||
}}>Enter the Dungeon</Button
|
||||
>
|
||||
</span>
|
||||
{/if}
|
||||
>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.background {
|
||||
opacity: 0.9;
|
||||
transition: transform 2s ease;
|
||||
transform: scale(1);
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.background.curtains-out {
|
||||
transform: scale(4) translateY(-100vh);
|
||||
}
|
||||
|
||||
.center {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
top: 0px;
|
||||
align-items: center;
|
||||
animation: fadeIn 5s ease forwards;
|
||||
animation-delay: 1s;
|
||||
transform: translateY(-5%);
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.enter-button {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.enter-button.visible {
|
||||
animation: fadeIn 5s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
@ -64,87 +69,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.drapery {
|
||||
background-image: url('/drapery.png');
|
||||
background-position: center top;
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
left: 0px;
|
||||
width: 100vw;
|
||||
height: 300px;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 600px 200px;
|
||||
z-index: 3;
|
||||
filter: brightness(1.2) contrast(1.2) saturate(1.3) hue-rotate(-15deg)
|
||||
drop-shadow(0px 0px 50px black);
|
||||
transform: translateY(-500px) scaleY(0);
|
||||
}
|
||||
|
||||
.curtains-in .drapery {
|
||||
animation: draperyIn 2s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes draperyIn {
|
||||
from {
|
||||
transform: translateY(-500px) scaleY(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0px) scaleY(1);
|
||||
}
|
||||
}
|
||||
img.curtain-right {
|
||||
position: fixed;
|
||||
top: -30px;
|
||||
right: 0px;
|
||||
width: 400px;
|
||||
z-index: 2;
|
||||
filter: brightness(0.8) contrast(1.1) saturate(0.6);
|
||||
animation-delay: 0s;
|
||||
transform: translateX(120%) rotate(-10deg);
|
||||
}
|
||||
|
||||
.curtains-in .curtain-right {
|
||||
animation: moveInRight 2s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes moveInRight {
|
||||
from {
|
||||
transform: translateX(120%) rotate(-10deg);
|
||||
}
|
||||
to {
|
||||
transform: translateX(15%) rotate(0deg);
|
||||
}
|
||||
}
|
||||
.mask-anim {
|
||||
margin-top: 100px;
|
||||
}
|
||||
img.curtain-left {
|
||||
transform: scaleX(-1);
|
||||
position: fixed;
|
||||
top: -30px;
|
||||
left: 0px;
|
||||
width: 400px;
|
||||
z-index: 2;
|
||||
filter: brightness(0.8) contrast(1.1) saturate(0.6);
|
||||
animation-delay: 0s;
|
||||
transform: translateX(-120%) rotate(10deg) scaleX(-1);
|
||||
}
|
||||
|
||||
.curtains-in .curtain-left {
|
||||
animation: moveInLeft 2s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes moveInLeft {
|
||||
from {
|
||||
transform: translateX(-120%) rotate(10deg) scaleX(-1);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-15%) rotate(0deg) scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
:global(#confetti) {
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
:global(canvas) {
|
||||
position: relative !important;
|
||||
z-index: -1 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
static/curtain.avif
Normal file
BIN
static/curtain.avif
Normal file
Binary file not shown.
BIN
static/curtain.webp
Normal file
BIN
static/curtain.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
static/drapery.avif
Normal file
BIN
static/drapery.avif
Normal file
Binary file not shown.
BIN
static/drapery.webp
Normal file
BIN
static/drapery.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Loading…
Reference in New Issue
Block a user