diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8646d98..1e28a6d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,6 +5,7 @@
import Maskenball from '$lib/components/maskenball.svelte';
+
@@ -20,6 +21,30 @@
justify-content: center;
margin-top: 50px;
}
+ .drapery {
+ background-image: url('/drapery.png');
+ position: absolute;
+ top: -50px;
+ left: 0px;
+ width: 100vw;
+ height: 300px;
+ background-repeat: repeat-x;
+ background-size: 500px;
+ z-index: 3;
+ filter: brightness(1.2) contrast(1.2) saturate(1.3) hue-rotate(-15deg)
+ drop-shadow(0px 0px 50px black);
+ animation: draperyIn 2s 2s ease forwards;
+ animation-delay: 2s;
+ transform: translateY(-500px) scaleY(0);
+ }
+ @keyframes draperyIn {
+ from {
+ transform: translateY(-500px) scaleY(0);
+ }
+ to {
+ transform: translateY(0px) scaleY(1);
+ }
+ }
img.curtain-right {
position: fixed;
top: -30px;
@@ -28,12 +53,12 @@
z-index: 2;
filter: brightness(0.8) contrast(1.1) saturate(0.6);
animation: moveInRight 2s ease forwards;
- animation-delay: 0.5s;
- transform: translateX(100%);
+ animation-delay: 2s;
+ transform: translateX(120%) rotate(-10deg);
}
@keyframes moveInRight {
from {
- transform: translateX(100%) rotate(-10deg);
+ transform: translateX(120%) rotate(-10deg);
}
to {
transform: translateX(15%) rotate(0deg);
@@ -47,15 +72,14 @@
width: 400px;
z-index: 2;
filter: brightness(0.8) contrast(1.1) saturate(0.6);
-
animation: moveInLeft 2s ease forwards;
- animation-delay: 0.5s;
- transform: translateX(-100%);
+ animation-delay: 2s;
+ transform: translateX(-120%) rotate(10deg) scaleX(-1);
}
@keyframes moveInLeft {
from {
- transform: translateX(-100%) rotate(10deg) scaleX(-1);
+ transform: translateX(-120%) rotate(10deg) scaleX(-1);
}
to {
transform: translateX(-15%) rotate(0deg) scaleX(-1);
diff --git a/static/drapery.png b/static/drapery.png
new file mode 100755
index 0000000..a4a7226
Binary files /dev/null and b/static/drapery.png differ