naja neon
This commit is contained in:
T-A-H-prog
@@ -2,7 +2,6 @@
|
||||
<html lang="en">
|
||||
<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>th</title>
|
||||
|
||||
BIN
src/assets/fonts/IBMPlexMono-Medium.woff2
Normal file
BIN
src/assets/fonts/IBMPlexMono-Medium.woff2
Normal file
Binary file not shown.
@@ -130,15 +130,6 @@ onUnmounted(() => {
|
||||
richtet, damit dies ein schön belebter Wohnort für die selber in
|
||||
Schönheit vollendete Menschheit sei. (Ebd.)
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
||||
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
||||
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
||||
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
||||
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
|
||||
mollit anim id est laborum.
|
||||
</p>
|
||||
<p>
|
||||
Nach Hegel (1770–1831) offenbart sich Gott in Natur und Kunst unter der
|
||||
Form der Schönheit. Gott äußert sich auf zweierlei Weise: in dem Objekt
|
||||
|
||||
@@ -13,22 +13,51 @@ let split;
|
||||
let animation;
|
||||
|
||||
function createTween() {
|
||||
split = SplitText.create(".text", { type: "chars,words,lines" });
|
||||
split = SplitText.create(".text", { type: "words" });
|
||||
|
||||
animation = gsap.from(split.lines, {
|
||||
rotationX: -100,
|
||||
transformOrigin: "50% 50% -160px",
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
ease: "power3",
|
||||
stagger: 0.25,
|
||||
const tl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: ".text",
|
||||
start: "top 80%",
|
||||
start: "top 75%",
|
||||
toggleActions: "play none none none",
|
||||
// markers: true
|
||||
},
|
||||
});
|
||||
|
||||
tl.set(".block", {
|
||||
borderColor: "#fff",
|
||||
boxShadow: "0 0 0px #fff",
|
||||
opacity: 0.3,
|
||||
});
|
||||
|
||||
// Flicker
|
||||
tl.to(".block", {
|
||||
opacity: 1,
|
||||
duration: 0.05,
|
||||
stagger: 0.1,
|
||||
})
|
||||
.to(".block", { opacity: 0.4, duration: 0.05, stagger: 0.1 })
|
||||
.to(".block", { opacity: 1, duration: 0.1 })
|
||||
.to(".block", { opacity: 0.6, duration: 0.05 })
|
||||
.to(".block", { opacity: 1, duration: 0.2 });
|
||||
|
||||
// Glow aufbauen
|
||||
tl.to(
|
||||
".block",
|
||||
{
|
||||
boxShadow: "0 0 20px #fff, 0 0 10px #fff",
|
||||
duration: 0.6,
|
||||
ease: "power2.out",
|
||||
},
|
||||
"-=0.3",
|
||||
);
|
||||
|
||||
tl.from(split.words, {
|
||||
y: 30, // kleine Bewegung statt Rotation
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
ease: "power2.out", // weicher als power3
|
||||
stagger: 0.05, // subtiler
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@@ -51,51 +80,76 @@ function handleResize() {
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
ctx?.revert(); // killt ALLES inkl. ScrollTrigger & SplitText sauber
|
||||
ctx?.revert();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="text">
|
||||
Welcome to my page!<br />
|
||||
This site is currently under construction, and I’ll be adding new things
|
||||
over time.<br />
|
||||
I’m a full-stack developer who wants to improve in design and front-end
|
||||
development.<br />
|
||||
This space is where I’ll build projects, experiment, and share what I
|
||||
create along the way.
|
||||
<div class="grid">
|
||||
<div class="block header text">
|
||||
Welcome to my page!<br />
|
||||
This site is currently under construction, and I’ll be adding new things
|
||||
over time.
|
||||
</div>
|
||||
|
||||
<div class="block mid text">
|
||||
I’m a full-stack developer who wants to improve in design and front-end
|
||||
development.<br />
|
||||
</div>
|
||||
|
||||
<div class="block sidebar text">
|
||||
This space is where I’ll build projects, experiment, and share what I
|
||||
create along the way.
|
||||
</div>
|
||||
|
||||
<!-- <div class="block footer">Footer</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
border-radius: 9px;
|
||||
min-height: 1vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
gap: 40px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.block {
|
||||
border: 2px solid #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: Courier New;
|
||||
color: #ffffff;
|
||||
font-size: clamp(2rem, 4vw, 9rem);
|
||||
line-height: 1.2;
|
||||
box-sizing: border-box;
|
||||
padding: 5%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: clamp(1.5rem, 3vw, 5rem);
|
||||
}
|
||||
.header {
|
||||
grid-column: 1 / -1;
|
||||
perspective: 500px;
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
.mid {
|
||||
grid-column: 2;
|
||||
line-height: 1.2;
|
||||
perspective: 500px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-column: 1/ -1;
|
||||
perspective: 500px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user