gute nacht<3

2026-04-13 22:03:56 +02:00
parent ae0df5b86e
commit 37cf67ad4f
16 changed files with 345 additions and 72 deletions
--- a/src/components/sections/HeroSection.vue
+++ b/src/components/sections/HeroSection.vue
@@ -1,20 +1,16 @@
 <script setup lang="js">
-import { onMounted, onUnmounted, ref } from "vue"
-import gsap from "gsap"
-
-import ScrollTrigger from "gsap/ScrollTrigger"
-gsap.registerPlugin(ScrollTrigger)
-
+import { onMounted, onUnmounted, ref } from "vue";
+import gsap from "gsap";

+import ScrollTrigger from "gsap/ScrollTrigger";
+gsap.registerPlugin(ScrollTrigger);

 const main = ref(null);
 let tl;
 let ctx;

-
 function setBoxes() {
-
-  const wrapper = main.value.querySelector('.content-wrapper');
+  const wrapper = main.value.querySelector(".content-wrapper");
  const rect = wrapper.getBoundingClientRect();

  const boxes = gsap.utils.toArray(".box");
@@ -22,7 +18,6 @@ function setBoxes() {
  gsap.set(".title", { y: 200 });

  boxes.forEach((box) => {
-
    const randomX = gsap.utils.random(0, rect.width);
    const randomY = gsap.utils.random(0, rect.height);

@@ -30,44 +25,45 @@ function setBoxes() {
      x: randomX,
      y: randomY,
      xPercent: -50,
-      yPercent: -50
+      yPercent: -50,
    });
-
  });
 }

 function toggleTimeline() {
-    tl.reversed(!tl.reversed())
+  tl.reversed(!tl.reversed());
 }
 function startNextAnimation() {
-  const centerX = window.innerWidth / 2
-  const centerY = window.innerHeight / 2
-  const radius = 250
+  const centerX = window.innerWidth / 2;
+  const centerY = window.innerHeight / 2;
+  const radius = 250;

  ctx = gsap.context(() => {
-    const boxes = gsap.utils.toArray(".box")
+    const boxes = gsap.utils.toArray(".box");
    tl = gsap.timeline({
      scrollTrigger: {
-
        start: "top top",
        end: "+=100%",
        scrub: true,
        pin: true,
-      }
-    })
+      },
+    });

    tl.to(boxes, {
      y: () => gsap.utils.random(-400, -150),
      rotate: () => gsap.utils.random(-180, 180),
      ease: "none",
-      stagger: 0.05
-    }).to(".title", {
+      stagger: 0.05,
+    }).to(
+      ".title",
+      {
        y: window.innerHeight - 130,
        ease: "power2.out",
-        duration: 6.0
-      }, 0)
-
-  }, main.value)
+        duration: 6.0,
+      },
+      0,
+    );
+  }, main.value);
 }

 onMounted(() => {
@@ -76,11 +72,9 @@ onMounted(() => {
 });

 onUnmounted(() => {
-  ctx?.revert()
+  ctx?.revert();
  // scrollTrigger.getAll().forEach(t => t.kill())
-}) 
-
-
+});
 </script>
 <template>
  <section class="container" ref="main">
@@ -103,8 +97,8 @@ onUnmounted(() => {
      <div class="box">x</div>
      <div class="box">m</div>
      <div class="box">o</div>
-      <div class="box">T</div>      
-      <div class="box">r</div>   
+      <div class="box">T</div>
+      <div class="box">r</div>
      <div class="box">l</div>
      <div class="box">e</div>
      <div class="box">e</div>
@@ -122,43 +116,36 @@ onUnmounted(() => {
      <div class="box">x</div>
      <div class="box">m</div>
      <div class="box">o</div>
-      <div class="box">T</div>      
-      <div class="box">r</div>   
-      
-      
-       
-
+      <div class="box">T</div>
+      <div class="box">r</div>
    </div>
  </section>
 </template>

 <style scoped>
-
-  .container {
-    background: radial-gradient(
-      129% 99% at 20% 85%,
-      rgb(54, 54, 54) 20%,
-      rgb(0, 0, 0) 90%
-    );
+.container {
+  background: radial-gradient(
+    129% 99% at 20% 85%,
+    rgb(54, 54, 54) 20%,
+    rgb(0, 0, 0) 90%
+  );
  background-blend-mode: color-dodge;
-    min-height: 100vh;
+  min-height: 100vh;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  }
-
+}

 .content-wrapper {
  position: relative;
  width: 100%;
-  height: 80vh;          
-
+  height: 80vh;
 }

 .title {
-  position: relative;   
+  position: relative;
  z-index: 1;
  text-align: center;

@@ -166,10 +153,7 @@ onUnmounted(() => {
  margin: 0;
 }

-
-
 .box {
-
  display: flex;
  align-items: center;
  justify-content: center;
@@ -181,9 +165,4 @@ onUnmounted(() => {
  will-change: transform;
  position: absolute;
 }
-
-
-
-
-
-</style>
+</style>
--- a/src/components/sections/WelcomeSection.vue
+++ b/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>