hero page background

src/components/sections/HeroSection.vue

@@ -1,66 +1,101 @@
-<script setup>
-import { ref, onMounted, onUnmounted } from "vue"
+<script setup lang="ts">
+import { onMounted, ref } from "vue"
 import gsap from "gsap"
-import ScrollTrigger from "gsap/ScrollTrigger"
-import { ScrollSmoother } from 'gsap/ScrollSmoother';
 
 
-gsap.registerPlugin(ScrollTrigger)
 
-const section = ref<HTMLElement | null>(null)
-let ctx
+
+const box = ref<HTMLElement | null>(null)
+
+const heroText = ref<HTMLElement | null>(null)
+const c = ref<HTMLElement | null>(null)
+//section.value = document.querySelector(".hero")
 
 onMounted(() => {
-  ctx = gsap.context(() => {
-    gsap.from(".hero-title", {
-      y: 100,
-      opacity: 0,
-      duration: 1.2,
-      ease: "power3.out",
-      scrollTrigger: {
-        trigger: section.value,
-        start: "top 80%",
-        end: "top 50%",
-        scrub: true
-      }
-    })
+  if (box.value) {
+    gsap.fromTo(box.value, { yPercent: 100 , delay : 1 }, { x: () => window.innerWidth * 0.4 , y:  () => window.innerHeight * 0.1 ,rotate: 90,  duration: 4, repeat: 8, yoyo: true, delay : 1})
+  }
+  if (heroText.value) {
+  gsap.fromTo(
+    heroText.value,
+    { 
+      x: 0,        
+      y: 0,
 
-    gsap.from(".hero-sub", {
-      y: 40,
-      opacity: 0,
-      duration: 1,
-      delay: 0.3,
-      scrollTrigger: {
-        trigger: section.value,
-        start: "top 80%",
-        end: "top 50%",
-        scrub: true
-      }
-    })
-  }, section)
+    },
+    { 
+      // x: () => window.innerWidth / 2 - heroText.value!.offsetWidth / 2,  
+      y: () => window.innerHeight / 2 - heroText.value!.offsetHeight / 2 + 25,
+      duration: 4,
+      ease: "power2.inOut"
+    }
+  )
+}
+  if (c.value) {
+    gsap.fromTo(c.value, {delay: 1}, {
+        x: () => window.innerWidth * 0.1,
+        y: () => window.innerHeight * 0.1,
+      })
+  }
 })
-
-onUnmounted(() => ctx.revert())
 </script>
-
 <template>
+<div class="container">
+  <div ref="box" class="box green"></div>
   <section ref="section" class="hero">
-    <h1 class="hero-title">Welcome</h1>
-    <p class="hero-sub">Tom Herpel</p>
+    <div ref="heroText" class="hero-text">
+      <div class="titel" >Welcome</div>
+      <div>to my website</div>
+    </div>
+    <!-- <p class="hero-sub">Tom Herpel</p> -->
   </section>
+</div>
 </template>
 
 <style scoped>
+  .container {
+    background: radial-gradient(
+      129% 99% at 20% 85%,
+      rgb(54, 54, 54) 20%,
+      rgb(0, 0, 0) 90%
+    );
+  background-blend-mode: color-dodge;
+  }
+
+  
 .hero {
   min-height: 100vh;
-  background: #0f0f0f;
   color: white;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
-.hero-title {
-  font-size: clamp(3rem, 6vw, 6rem);
+.hero-text {
+  font-display: block;
+  font-style: normal;
+  font-weight: bold;
+  color: #ffffff;
+  
+  
+  font-size: clamp(2rem, 12rem, 5vw);
+  box-sizing: border-box;
+  width: 100%;
 }
+.titel { 
+  font-weight: 900;
+   font-size: clamp(3rem, 6vw, 6rem); 
+  
+}
+.box {
+  width: 100px;
+  height: 100px;
+  background: linear-gradient( 111.45deg,#ffffff 19.42%,#f7bdf8 73.08%);
+  border-radius: 20%;
+}
+
+
+
+
+
 </style>