Martin_Rattensberger_IT_Services/thenextbigthing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

erste version für upload

Browse Source
This commit is contained in:
Martin Rattensberger
2024-10-07 00:11:09 +02:00
parent d0b36169dc
commit 5e2791a35c
2 changed files with 97 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
.aider*

120
animation.html
View File

@@ -2,11 +2,11 @@
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title> <title>Animation</title>
<style> <style>
body { body {
display: flex; display: flex;
flex-direction: column; /* Texte untereinander anordnen */
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
@@ -15,39 +15,111 @@
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
overflow: hidden; overflow: hidden;
} }
.text { .text, .text1, .text3 {
position: absolute;
font-size: 2em; font-size: 2em;
opacity: 0.8;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
border-right: 0.15em solid orange;
}
.typewriter {
animation: typing 3.5s steps(30, end), blink-caret 0.75s step-end infinite;
}
.fade {
animation: fadeText 6s infinite;
opacity: 0; opacity: 0;
width: 0ch; /* Initiale Breite für die Typing-Animation */
border-right: 0.15em solid transparent; /* Cursor initial unsichtbar */
} }
@keyframes typing { .text1, .text3 {
from { width: 0; } margin-top: 20px;
to { width: 100%; }
} }
@keyframes blink-caret { /* Breite von .text3 auf auto setzen */
from, to { border-color: transparent; } .text3 {
50% { border-color: orange; } width: auto;
} }
@keyframes fadeText { .textFirst {
0%, 33% { opacity: 0; } animation: animationFirst 18s steps(21, end) infinite;
34%, 66% { opacity: 1; } }
67%, 100% { opacity: 0; } .textSecond {
animation: animationSecond 18s steps(10, end) infinite;
}
.textThird {
animation: animationThird 18s linear infinite;
}
@keyframes animationFirst {
0% {
width: 0ch;
opacity: 0;
border-right-color: orange;
}
5% {
opacity: 1;
}
15% {
width: 21ch;
opacity: 1;
border-right-color: orange;
}
15.1% {
width: 21ch;
opacity: 1;
border-right-color: transparent;
}
50% {
opacity: 1;
}
60% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes animationSecond {
15% {
width: 0ch;
opacity: 0;
border-right-color: transparent;
}
20% {
opacity: 1;
border-right-color: orange;
}
30% {
width: 10ch;
opacity: 1;
border-right-color: orange;
}
30.1% {
width: 10ch;
opacity: 1;
border-right-color: transparent;
}
50% {
opacity: 1;
}
60% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes animationThird {
0%, 60% {
opacity: 0;
}
65% {
opacity: 1;
}
85% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
} }
</style> </style>
</head> </head>
<body> <body>
<div class="text typewriter">The Next BIG Thing...</div> <div class="text textFirst">the next BIG thing...</div>
<div class="text fade" style="animation-delay: 4s;">stay tuned</div> <div class="text1 textSecond">stay tuned</div>
<div class="text fade" style="animation-delay: 8s;">coming soon</div> <div class="text3 textThird">coming soon</div>
</body> </body>
</html> </html>