118 lines
3.2 KiB
Plaintext
118 lines
3.2 KiB
Plaintext
---
|
|
import "pannellum/build/pannellum.css";
|
|
import pano from "../../public/pic/panorama/maschinenraum_half.jpg";
|
|
import { Image } from "astro:assets";
|
|
import Heading from "@/components/Heading.astro";
|
|
---
|
|
|
|
<div class="h-[60vh] w-full flex justify-center items-center">
|
|
<div
|
|
class="w-full h-full absolute flex flex-col justify-center items-center z-40"
|
|
>
|
|
<div
|
|
id="landing-heading-container"
|
|
class="flex flex-col justify-center items-center gap-2 backdrop-blur-2xl
|
|
p-card rounded-card ring ring-primary/20
|
|
max-md:w-[90vw]"
|
|
style="background-image:
|
|
linear-gradient(to bottom, transparent, hsl(var(--color-primary) / 0.1) 100%),
|
|
repeating-linear-gradient(60deg, transparent, hsl(var(--color-neutral-accent) / 0.2) 0.5rem, hsl(var(--color-neutral-accent) / 1) 0.5rem );"
|
|
>
|
|
<!--h1>vspace.one</h1-->
|
|
<Heading
|
|
padding={false}
|
|
animated
|
|
id="heading-makerspace"
|
|
class="text-4xl text-center"
|
|
>
|
|
Ein Makerspace und Hackerspace.
|
|
</Heading>
|
|
<p>
|
|
<a class="text-xl" href="/tour">Hier gehts zur virtuellen Space-Tour!</a
|
|
>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-full">
|
|
<Image
|
|
format="avif"
|
|
id="pano-img"
|
|
class="hidden"
|
|
src={pano}
|
|
alt="Ein Panorama Bild des Maschinenraums"
|
|
/>
|
|
<div style="opacity: 0;" class="w-full h-full" id="pano-bg"></div>
|
|
<!--little-planet
|
|
width="2400"
|
|
height="900"
|
|
class="anim"
|
|
src="/pic/panorama/maschinenraum_half.jpg"
|
|
mode="pano"></!little-planet-->
|
|
</div>
|
|
<script>
|
|
import { animate } from "motion";
|
|
import { ease } from "@unom/style";
|
|
import "pannellum";
|
|
import animateHeading from "@/lib/animate-heading";
|
|
|
|
const init = () => {
|
|
const panoBg = document.getElementById("pano-bg")!;
|
|
const panoImg = document.getElementById("pano-img")! as HTMLImageElement;
|
|
const headingMakerspace = document.getElementById("heading-makerspace")!;
|
|
|
|
const viewer = pannellum.viewer(panoBg, {
|
|
panorama: panoImg.src,
|
|
autoLoad: true,
|
|
showControls: false,
|
|
});
|
|
|
|
viewer.setYaw(90, false);
|
|
|
|
const animateEntry = () => {
|
|
const landingHeadingContainer = document.querySelector(
|
|
"#landing-heading-container",
|
|
)!;
|
|
|
|
animate(
|
|
landingHeadingContainer,
|
|
{ scale: [0.4, 1], opacity: [0, 1] },
|
|
{
|
|
...ease.quint!(1.4, 0.2).out,
|
|
},
|
|
);
|
|
|
|
animateHeading(headingMakerspace, { delay: 0.5, once: true });
|
|
|
|
viewer.on("load", () => {
|
|
animate(
|
|
panoBg,
|
|
{ scale: [0.9, 1], opacity: [0, 1] },
|
|
{
|
|
...ease.quint!(1.5).out,
|
|
},
|
|
);
|
|
|
|
animate(
|
|
(progress) => {
|
|
viewer.setPitch(progress * 10, false);
|
|
viewer.setYaw(160 + ((progress * 270) % 360), false);
|
|
viewer.setHfov(50 + progress * 50, false);
|
|
},
|
|
{
|
|
...ease.quint!(4).inOut,
|
|
},
|
|
);
|
|
});
|
|
};
|
|
|
|
animateEntry();
|
|
};
|
|
|
|
init();
|
|
|
|
document.addEventListener("astro:after-swap", () => {
|
|
init();
|
|
});
|
|
</script>
|
|
</div>
|