th-website/src/components/sections/WelcomeSection.vue

<script setup>
import { onMounted, onUnmounted, ref, nextTick } from "vue";

import MonitorModel from "/src/components/sections/MonitorModel.vue";

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

import parallax_night from "/src/assets/background/night2.png";
import parallax_castle from "/src/assets/background/dom.png";
import Lenis from "lenis";

gsap.registerPlugin(ScrollTrigger);

let ctx, lenis;
const childRef = ref(null);
const parallaxRef = ref(null);

function initParallax(triggerElement) {
  const layers = [
    { layer: "1", yPercent: 70 },
    { layer: "2", yPercent: 50 },
    { layer: "3", yPercent: 30 },
    { layer: "4", yPercent: 10 },
  ];

  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 initChild() {
  gsap.to(childRef.value, {
    scrollTrigger: {
      trigger: childRef.value,
      start: "top center",
    },
    scale,
  });
}

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(async () => {
  await nextTick();

  ctx = gsap.context(() => {
    initParallax(parallaxRef.value);
    // initChild();
    initLenis();
  });
});
onUnmounted(() => {
  ctx?.revert();
  lenis?.destroy();
});
</script>
<template>
  <div ref="parallaxRef" 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">
      <!-- <div ref="childRef" class="model__wrapper">
        <MonitorModel />
      </div> -->
    </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;
  /* color: #e84b3d; 633a34 */
}

.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>