gute nacht<3

src/components/sections/WelcomeSection.vue

@@ -0,0 +1,253 @@
+<script setup>
+import { onMounted, onUnmounted } from "vue";
+import gsap from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
+
+import parallax_night from "/src/assets/background/night.jpg";
+import parallax_castle from "/src/assets/background/dom.png";
+import Lenis from "lenis";
+
+gsap.registerPlugin(ScrollTrigger);
+
+let ctx;
+
+function initParallax() {
+  const layers = [
+    { layer: "1", yPercent: 70 },
+    { layer: "2", yPercent: 50 },
+    { layer: "3", yPercent: 30 },
+    { layer: "4", yPercent: 10 },
+  ];
+
+  const triggerElement = document.querySelector(".parallax");
+
+  const tl = gsap.timeline({
+    scrollTrigger: {
+      trigger: triggerElement,
+      start: "top top",
+      end: "bottom top",
+      scrub: true,
+    },
+  });
+
+  layers.forEach((layerObj, idx) => {
+    tl.to(
+      triggerElement.querySelectorAll(
+        `[data-parallax-layer="${layerObj.layer}"]`,
+      ),
+      {
+        yPercent: layerObj.yPercent,
+        ease: "none",
+      },
+      idx === 0 ? 0 : "<",
+    );
+  });
+}
+function initLenis() {
+  lenis = new Lenis({
+    duration: 1.1,
+    smoothWheel: true,
+    smoothTouch: false,
+  });
+
+  lenis.on("scroll", ScrollTrigger.update);
+
+  gsap.ticker.add((time) => {
+    lenis.raf(time * 1000);
+  });
+
+  gsap.ticker.lagSmoothing(0);
+}
+onMounted(() => {
+  ctx = gsap.context(() => {
+    initParallax();
+    initLenis();
+  });
+});
+
+onUnmounted(() => {
+  ctx?.revert();
+  lenis?.destroy();
+});
+</script>
+<template>
+  <div class="parallax">
+    <section class="parallax__header">
+      <div class="parallax__visuals">
+        <div class="parallax__layers">
+          <img
+            :src="parallax_night"
+            data-parallax-layer="1"
+            class="parallax__layer-img"
+          />
+
+          <img
+            :src="parallax_castle"
+            data-parallax-layer="2"
+            class="parallax__layer-img"
+          />
+
+          <div data-parallax-layer="3" class="parallax__layer-title">
+            <h2 class="parallax__title">TOM HERPEL</h2>
+          </div>
+
+          <img data-parallax-layer="4" class="parallax__layer-img" />
+        </div>
+
+        <div class="parallax__fade"></div>
+      </div>
+    </section>
+
+    <section class="parallax__content"></section>
+  </div>
+</template>
+<style scoped>
+.parallax__fade {
+  --dark: 0, 0, 0;
+
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 60vh;
+
+  background: linear-gradient(
+    to top,
+    rgba(var(--dark), 1) 0%,
+    rgba(var(--dark), 0.9) 10%,
+    rgba(var(--dark), 0.75) 20%,
+    rgba(var(--dark), 0.55) 35%,
+    rgba(var(--dark), 0.35) 50%,
+    rgba(var(--dark), 0.2) 65%,
+    rgba(var(--dark), 0.1) 80%,
+    rgba(var(--dark), 0.04) 90%,
+    rgba(var(--dark), 0.01) 96%,
+    transparent 100%
+  );
+
+  pointer-events: none;
+}
+
+.parallax__header {
+  z-index: 2;
+
+  justify-content: center;
+  align-items: center;
+  min-height: 100svh;
+  display: flex;
+  position: relative;
+}
+
+.parallax {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.parallax__content {
+  justify-content: center;
+  align-items: center;
+  min-height: 100svh;
+  display: flex;
+  position: relative;
+}
+
+.parallax__visuals {
+  object-fit: cover;
+  width: 100%;
+  max-width: none;
+  height: 120%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.parallax__placeholder {
+  z-index: 0;
+  opacity: 0;
+  object-fit: cover;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.parallax__layers {
+  object-fit: cover;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+.parallax__fade {
+  z-index: 30;
+  object-fit: cover;
+  width: 100%;
+  max-width: none;
+  height: 20%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+.parallax__title {
+  pointer-events: auto;
+  text-align: center;
+  text-transform: none;
+  margin-top: 0;
+  margin-bottom: 0.1em;
+  margin-right: 0.075em;
+  /* font-family:
+    PP Neue Corp Wide,
+    sans-serif; */
+  font-family: "ArtDystopia", sans-serif;
+
+  font-size: 11vw;
+  font-weight: 800;
+  line-height: 1;
+  position: relative;
+}
+
+.parallax__radial-gradient {
+  z-index: 10;
+  background-image: radial-gradient(
+    circle farthest-corner at 50% 50%,
+    transparent,
+    #0c0c0c
+  );
+  opacity: 0.5;
+  pointer-events: none;
+  mix-blend-mode: multiply;
+  position: fixed;
+  inset: 0;
+}
+.parallax__layer-title {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100svh;
+  display: flex;
+  position: absolute;
+  overflow: visible;
+  top: 0;
+  left: 0;
+}
+.parallax__layer-img {
+  pointer-events: none;
+  object-fit: cover;
+  width: 100%;
+  max-width: none;
+  height: 269.5%;
+  position: absolute;
+  top: -17.5%;
+  left: 0;
+}
+@font-face {
+  font-family: "ArtDystopia";
+  src: url("/src/assets/fonts/Art_Dystopia.woff2") format("opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+</style>