th/th-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hero page background

Browse Source
This commit is contained in:
T-A-H-prog
2026-03-05 22:42:13 +01:00
parent c94d608141
commit 17975124d4
9 changed files with 100 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>blog</title> <title>blog</title>
</head> </head>

BIN
src/assets/background/blackwhite.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 MiB

BIN
src/assets/background/marmor.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 MiB

BIN
src/assets/background/paper.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
src/assets/background/wall.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

117
src/components/sections/HeroSection.vue
View File

@@ -1,66 +1,101 @@
<script setup> <script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue" import { onMounted, ref } from "vue"
import gsap from "gsap" 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(() => { onMounted(() => {
ctx = gsap.context(() => { if (box.value) {
gsap.from(".hero-title", { 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})
y: 100, }
opacity: 0, if (heroText.value) {
duration: 1.2, gsap.fromTo(
ease: "power3.out", heroText.value,
scrollTrigger: { {
trigger: section.value, x: 0,
start: "top 80%", y: 0,
end: "top 50%",
scrub: true
}
})
gsap.from(".hero-sub", { },
y: 40, {
opacity: 0, // x: () => window.innerWidth / 2 - heroText.value!.offsetWidth / 2,
duration: 1, y: () => window.innerHeight / 2 - heroText.value!.offsetHeight / 2 + 25,
delay: 0.3, duration: 4,
scrollTrigger: { ease: "power2.inOut"
trigger: section.value, }
start: "top 80%", )
end: "top 50%", }
scrub: true if (c.value) {
} gsap.fromTo(c.value, {delay: 1}, {
}) x: () => window.innerWidth * 0.1,
}, section) y: () => window.innerHeight * 0.1,
})
}
}) })
onUnmounted(() => ctx.revert())
</script> </script>
<template> <template>
<div class="container">
<div ref="box" class="box green"></div>
<section ref="section" class="hero"> <section ref="section" class="hero">
<h1 class="hero-title">Welcome</h1> <div ref="heroText" class="hero-text">
<p class="hero-sub">Tom Herpel</p> <div class="titel" >Welcome</div>
<div>to my website</div>
</div>
<!-- <p class="hero-sub">Tom Herpel</p> -->
</section> </section>
</div>
</template> </template>
<style scoped> <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 { .hero {
min-height: 100vh; min-height: 100vh;
background: #0f0f0f;
color: white; color: white;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.hero-title { .hero-text {
font-size: clamp(3rem, 6vw, 6rem); 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> </style>

35
src/components/sections/TextSection.vue
View File

@@ -1,40 +1,5 @@
<script setup> <script setup>
import { ref, onMounted, onUnmounted } from "vue"
import gsap from "gsap"
import ScrollTrigger from "gsap/ScrollTrigger"
gsap.registerPlugin(ScrollTrigger)
const section = ref(null)
let ctx
onMounted(() => {
ctx = gsap.context(() => {
gsap.from(".fade-text", {
opacity: 0,
y: 50,
duration: 1,
scrollTrigger: {
trigger: section.value,
start: "top 70%"
}
})
gsap.to(".highlight", {
backgroundSize: "100% 100%",
scrollTrigger: {
trigger: ".highlight",
start: "top 80%",
end: "top 50%",
scrub: true
}
})
}, section)
})
onUnmounted(() => ctx.revert())
</script> </script>
<template> <template>

15
src/composables/useScrollAnimations.ts
View File

@@ -23,11 +23,20 @@ export function useActiveSection(sectionIds: string[]) {
end: 'bottom center', end: 'bottom center',
onEnter: () => { onEnter: () => {
if (currentSection.value !== id) { if (currentSection.value !== id) {
//uiStore.currentSection = id currentSection.value = id
console.log(`Section aktiv: ${id} (nach unten gescrollt)`)
console.log(`Section aktiv: ${id} (nach unten gescrollt)`);
window.dispatchEvent(new CustomEvent('section:enter', {detail: id}))
} }
}, },
onEnterBack: () => (currentSection.value = id), onEnterBack: () => {
if (currentSection.value !== id) {
currentSection.value = id
window.dispatchEvent(new CustomEvent('section:enter', {detail : id}))
}
},
}) })
}) })
}) })

12
src/views/HomeView.vue
View File

@@ -5,6 +5,9 @@ import TextSection from '../components/sections/TextSection.vue'
import { useActiveSection } from '../composables/useScrollAnimations' import { useActiveSection } from '../composables/useScrollAnimations'
const { currentSection } = useActiveSection(['hero', 'image', 'text']) const { currentSection } = useActiveSection(['hero', 'image', 'text'])
</script> </script>
<template> <template>
@@ -15,4 +18,11 @@ const { currentSection } = useActiveSection(['hero', 'image', 'text'])
<div class="indicator"> <div class="indicator">
Aktuelle Section: {{ currentSection }} Aktuelle Section: {{ currentSection }}
</div> </div>
</template> </template>
<style lang="css" scoped>
</style>