197 lines
3.5 KiB
Vue
197 lines
3.5 KiB
Vue
<script setup lang="js">
|
||
import { onMounted, onUnmounted, ref } from "vue";
|
||
import gsap from "gsap";
|
||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||
import SplitText from "gsap/SplitText";
|
||
|
||
gsap.registerPlugin(ScrollTrigger, SplitText);
|
||
|
||
const section = ref(null);
|
||
|
||
let ctx;
|
||
let split;
|
||
let animation;
|
||
const date = ref("--:--");
|
||
const time = ref("");
|
||
let interval;
|
||
|
||
function createTween() {
|
||
animation?.kill();
|
||
split = SplitText.create(".text", {
|
||
type: "words",
|
||
});
|
||
|
||
animation = gsap.from(split.words, {
|
||
y: 30,
|
||
opacity: 0,
|
||
duration: 0.9,
|
||
ease: "power2.out",
|
||
stagger: 0.05,
|
||
|
||
scrollTrigger: {
|
||
trigger: section.value,
|
||
start: "top 10%",
|
||
toggleActions: "play none none none",
|
||
},
|
||
});
|
||
}
|
||
|
||
onMounted(() => {
|
||
ctx = gsap.context(() => {
|
||
createTween();
|
||
|
||
window.addEventListener("resize", handleResize);
|
||
}, section.value);
|
||
|
||
requestAnimationFrame(() => {
|
||
ScrollTrigger.refresh();
|
||
});
|
||
getTimeDate();
|
||
interval = setInterval(() => {
|
||
getTimeDate();
|
||
}, 1000);
|
||
console.log(date.value);
|
||
});
|
||
|
||
function handleResize() {
|
||
split && split.revert();
|
||
split = SplitText.create(".text", {
|
||
type: "words",
|
||
});
|
||
ScrollTrigger.refresh();
|
||
}
|
||
|
||
onUnmounted(() => {
|
||
window.removeEventListener("resize", handleResize);
|
||
ctx?.revert();
|
||
clearInterval(interval);
|
||
});
|
||
|
||
function getTimeDate() {
|
||
const now = new Date();
|
||
|
||
time.value = now.toLocaleTimeString("de-DE", {
|
||
timeZone: "Europe/Berlin",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
});
|
||
|
||
date.value = now.toLocaleDateString("de-DE", {
|
||
timeZone: "Europe/Berlin",
|
||
weekday: "long",
|
||
day: "2-digit",
|
||
month: "long",
|
||
year: "numeric",
|
||
});
|
||
}
|
||
</script>
|
||
<template>
|
||
<div class="poster">
|
||
<div class="b-one"></div>
|
||
<div class="b-two"></div>
|
||
<div class="b-three"></div>
|
||
<div class="b-four"></div>
|
||
<div class="b-five"></div>
|
||
|
||
<div class="textblock text">
|
||
<h4 class="textblock__subheader text">Tom Alexander Herpel</h4>
|
||
|
||
<h1 class="textblock__header text">
|
||
Welcome to my page. <br />
|
||
This space is currently under construction.
|
||
</h1>
|
||
|
||
<h4 class="textblock__subheader text">
|
||
Here you’ll find creative projects and ideas that inspire me at the
|
||
moment.
|
||
</h4>
|
||
|
||
<p class="textblock__caption">Oldenburg, Germany <br /></p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<style scoped>
|
||
.poster {
|
||
display: grid;
|
||
grid-template-columns: repeat(33, 1fr);
|
||
grid-template-rows: repeat(16, 1fr);
|
||
|
||
width: 100%;
|
||
height: 100vh;
|
||
|
||
background: var(--bg-clr);
|
||
overflow: hidden;
|
||
position: relative;
|
||
padding: 2rem;
|
||
}
|
||
|
||
/* Schwarze Blöcke */
|
||
.b-one,
|
||
.b-two,
|
||
.b-three,
|
||
.b-four,
|
||
.b-five {
|
||
background: var(--black-clr);
|
||
}
|
||
|
||
.b-one {
|
||
grid-column: 1 / 4;
|
||
grid-row: 11 / 15;
|
||
}
|
||
|
||
.b-two {
|
||
grid-column: 4 / 12;
|
||
grid-row: 6 / 8;
|
||
}
|
||
|
||
.b-three {
|
||
grid-column: 16 / 18;
|
||
grid-row: 8 / 11;
|
||
}
|
||
|
||
.b-four {
|
||
grid-column: 11 / 30;
|
||
grid-row: 15 / 17;
|
||
}
|
||
|
||
.b-five {
|
||
grid-column: 30 / 34;
|
||
grid-row: 1 / 11;
|
||
}
|
||
|
||
/* Textbereich */
|
||
.textblock {
|
||
grid-column: 6 / 28;
|
||
grid-row-end: 14;
|
||
|
||
align-self: center;
|
||
color: var(--black-clr);
|
||
}
|
||
|
||
.textblock__subheader {
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
margin-bottom: 1rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.textblock__header {
|
||
font-size: 4rem;
|
||
line-height: 1;
|
||
font-weight: 700;
|
||
margin-bottom: 2rem;
|
||
max-width: 900px;
|
||
}
|
||
|
||
.textblock__caption {
|
||
font-size: 0.85rem;
|
||
line-height: 1.7;
|
||
max-width: 600px;
|
||
}
|
||
.text {
|
||
font-family: Courier New;
|
||
font-size: clamp(1.5rem, 3vw, 5rem);
|
||
}
|
||
</style>
|