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

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

@@ -1,40 +1,5 @@
<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>
<template>

15
src/composables/useScrollAnimations.ts
View File

@@ -23,11 +23,20 @@ export function useActiveSection(sectionIds: string[]) {
end: 'bottom center',
onEnter: () => {
if (currentSection.value !== id) {
//uiStore.currentSection = id
console.log(`Section aktiv: ${id} (nach unten gescrollt)`)
currentSection.value = id
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'
const { currentSection } = useActiveSection(['hero', 'image', 'text'])
</script>
<template>
@@ -15,4 +18,11 @@ const { currentSection } = useActiveSection(['hero', 'image', 'text'])
<div class="indicator">
Aktuelle Section: {{ currentSection }}
</div>
</template>
</template>
<style lang="css" scoped>
</style>