paul/DAIALECT
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

alles relativ

Browse Source
This commit is contained in:
Paul Martin
2023-12-27 16:08:07 +01:00
parent 82933b7f46
commit 94b352a2b2
4 changed files with 66 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
about.html
View File

@ -23,8 +23,8 @@
</div>
<div class="start">
<div class="title">
<h2 class="laut">/ˈd<em>aɪ</em>.ə.lekt/ <br>
<p>AI steckt nicht nur im Namen.</p></h2>
<h2 class="laut">/ˈd<em>aɪ</em>.ə.lekt/</h2>
<p>AI steckt nicht nur im Namen.</p>
</div>
<div id="blobs">
<div id="blue" class="blob"></div>

26
animations.js
View File

@ -6,21 +6,20 @@ $(document).ready(function () {
uplabel = document.getElementById("filelabel")
upline = document.getElementById("formline")
upbtn = document.getElementById("upload")
if (upbtn != null) {upbtn.addEventListener ("click", ButtonPress)}
var height1 = $("#eins").height ();
var height2 = $("#zwei").height ();
if (height1 < 300) {height1 += 550};
console.log (height1, height2);
$("#fileselect").change(function() {
uplabel.textContent = this.files[0].name + " (Klick zum Ändern)"
changeFile ()
});
if (upbtn != null) {upbtn.addEventListener ("click", ButtonPress)}
$(window).scroll(function () {
var height1 = $("#eins").height ();
var height2 = $("#zwei").height ();
var screenheight = $("body").height();
var pos = $(this).scrollTop ();
if (stage ==1 && pos-200 >= height2) { moveBlobs ("225vh", 600, 2)}
else if (stage == 2 && pos < height2 ) { moveBlobs ("95vh", 1000, 1)}
else if (stage == 0 && pos+600 >= height1){ moveBlobs ("95vh", 1000, 1)}
else if ((stage == 1 && pos < height1-450)) { moveBlobs (0,0,0) }
if (stage == 1 && pos-(screenheight/4.5) >= height2) { moveBlobs ("225vh", "31vw", 2)}
else if (stage == 2 && pos-(screenheight/1.9) < height2 ) { moveBlobs ("95vh", "52vw", 1)}
else if (stage == 0 && pos+(screenheight/1.5) >= height1){ moveBlobs ("95vh", "52vw", 1)}
else if ((stage == 1 && pos < height1-(screenheight/2))) { moveBlobs (0,0,0) }
})
}
)
@ -58,7 +57,7 @@ function moveBlobs (t, r, to) {
setTimeout (function () {
$("#blobs").css ({
'top': t,
'right': r + 'px',
'right': r,
'animation': '',});
$("#green").css ({ 'animation': 'appear 0.4s -0.075s ease-in' })
$("#blue").css ({ 'animation': 'appear 0.4s 0s ease-in' })
@ -88,17 +87,20 @@ function changeFile (){
function ButtonPress () {
upbtn.setAttribute ('disabled', 'disabled')
uplabel.setAttribute('hidden', 'hidden')
upline.setAttribute('hidden', 'hidden')
document.body.style.cursor = "progress"
$("#fileupload").css ({
'cursor': 'not-allowed',
'animation': 'text-in-out 1s'
})
$("#formline").css ({
'animation': 'border-out 1s'
})
$("#upload").css ({
'cursor': 'not-allowed',
})
setTimeout (function () {
uplabel.setAttribute('hidden', 'hidden')
upline.setAttribute('hidden', 'hidden')
upbtn.value = "Verarbeite..."
$('#upload').css ({'padding-top': '3vw'})
}, 500)

7
index.html
View File

@ -23,7 +23,8 @@
</div>
<div class="start">
<div class="title">
<h1>D<em>AI</em>A<br>LECT</h1>
<h1>D<em>AI</em>A<br>
LECT</h1>
</div>
<div id="blobs">
<div id="blue" class="blob"></div>
@ -42,7 +43,9 @@
</div>
<div id="zwei">
<div class = "text-mittig">
<h2> MIT HILFE VON <br> KI ALLE <br></h2> <h3>MENSCHEN VERSTEHEN</h3>
<h2> MIT HILFE VON <br>
KI ALLE <br></h2>
<h3>MENSCHEN VERSTEHEN</h3>
</div>
</div>
<div id="navbar-bottom">

82
style.css
View File

@ -33,7 +33,7 @@ body
z-index: 55;
border-radius: 2cqmin;
opacity: 90%;
height: 6vh;
height: 3vw;
}
ul {
@ -54,7 +54,7 @@ li {
padding: 0.6vw;
text-decoration: none;
font-weight: bold;
font-size: 1.7vw;
font-size: 1.6vw;
}
li a {
@ -151,7 +151,8 @@ p {
font-size: 7.5vw;
text-align: right;
text-align-last: right;
padding-right: 10vw;
padding: 0 10vw 0 0;
margin: 0;
font-family: "League Spartan";
}
@ -182,6 +183,7 @@ h1 em {
font-size: 3.5vw;
font-family: "League Spartan";
font-style: normal;
padding-right: 10vw;
}
.button-rechts {
@ -255,12 +257,12 @@ hr {
.blob {
border-radius: 5px;
filter: blur(1.5px);
width: 10px;
height: 10px;
border-radius: 7.5vw;
filter: blur(1.6vw);
width: 15vw;
height: 15vw;
top: 25vh;
scale: 45;
scale: 1.4;
}
#blue {
@ -297,6 +299,12 @@ hr {
100% {color: inherit}
}
@keyframes border-out {
0% {opacity: 1;}
40% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes border-in-out {
0% {border-radius: 1.5vw}
10%{border-radius: 1.5vw}
@ -315,80 +323,80 @@ hr {
@keyframes idle-blue {
0% {transform: scale(1); z-index: 0;}
20% {transform: scale(1.4); z-index: 1;}
40% {transform: scale(1.1); z-index: 0; transform: translateY(2px);}
60% {transform: scale(0.8); transform: translateX(2.5px)}
40% {transform: scale(1.1); z-index: 0; transform: translateY(2vw);}
60% {transform: scale(0.8); transform: translateX(2.5vw)}
80% {transform: scale(0.9);}
95% {transform: scale(1); transform: translateY(-2px); transform: translateX(-2.5px);}
95% {transform: scale(1); transform: translateY(-2vw); transform: translateX(-2.5vw);}
}
@keyframes idle-green {
0% {transform: scale(1); }
20% {transform: scale(0.8); }
40% {transform: scale(1.1); transform: translateY(3.5px);}
60% {transform: scale(0.9); transform: translateX(-1px)}
40% {transform: scale(1.1); transform: translateY(3.5vw);}
60% {transform: scale(0.9); transform: translateX(-1vw)}
80% {transform: scale(1.3); }
95% {transform: scale(1); ; transform: translateY(3px); transform: translateX(2px);}
95% {transform: scale(1); ; transform: translateY(3vw); transform: translateX(2vw);}
}
@keyframes idle-red {
0% {transform: scale(1); ;}
20% {transform: scale(1.3); z-index: 3;}
40% {transform: scale(1.2); z-index: 2; transform: translateY(-3px);}
60% {transform: scale(0.7); z-index: 0; transform: translateX(-2px)}
40% {transform: scale(1.2); z-index: 2; transform: translateY(-3vw);}
60% {transform: scale(0.7); z-index: 0; transform: translateX(-2vw)}
80% {transform: scale(0.9); z-index: 0;}
95% {transform: scale(1); ; transform: translateY(3px); transform: translateX(2px);}
95% {transform: scale(1); ; transform: translateY(3vw); transform: translateX(2vw);}
}
@keyframes move-down-1 {
0% {top: 0; right: 0}
100% {top: 0; right: 1000px}
100% {top: 0; right: 52vw}
}
@keyframes green-move-down-1 {
0% {top: 0; right: 0 }
50% {right: 400px}
90% {top: 75vh; opacity: 100%; right: 190px; transform: scale(1);}
100% {top: 100vh; right: 200px; opacity: 10%; transform: scale(0.2);}
50% {right: 21vw}
90% {top: 75vh; opacity: 100%; right: 9.8vw; transform: scale(1);}
100% {top: 100vh; right: 10.4vw; opacity: 10%; transform: scale(0.2);}
}
@keyframes red-move-down-1 {
0% {top: 0; right: 0 }
0% {top: 0;}
90% {top: 85vh; opacity: 100%; transform: scale(1);}
100% {top: 100vh; right: 0; opacity: 10%; transform: scale(0.2);}
100% {top: 100vh; opacity: 10%; transform: scale(0.2);}
}
@keyframes blue-move-down-1 {
0% {top: 0; right: 0 }
40% {right: 400px}
75% {right: 300px}
40% {right: 21vw}
75% {right: 17vw}
90% {opacity: 100%; transform: scale(1);}
100% {top: 110vh; right: 0px; opacity: 10%; transform: scale(0.2);}
100% {top: 110vh; right: 0; opacity: 10%; transform: scale(0.2);}
}
@keyframes move-down-2 {
0% {top: 0; right: 1000px}
100% {top: 0; right: 600px}
0% {top: 0; right: 52vw}
100% {top: 0; right: 31vw}
}
@keyframes green-move-down-2 {
0% {top: 100vh; right: 0px }
50% {right: 400px}
90% {top: 175vh; opacity: 100%; right: 190px; transform: scale(1);}
0% {top: 100vh; right: 0 }
50% {right: 21vw}
90% {top: 175vh; opacity: 100%; right: 9.8vw; transform: scale(1);}
100% {top: 205vh; right: 0; opacity: 10%; transform: scale(0.2);}
}
@keyframes red-move-down-2 {
0% {top: 100vh; right: 0px }
0% {top: 100vh;}
90% {top: 185vh; opacity: 100%; transform: scale(1);}
100% {top: 205vh; right: 0px; opacity: 10%; transform: scale(0.2);}
100% {top: 205vw; opacity: 10%; transform: scale(0.2);}
}
@keyframes blue-move-down-2 {
0% {top: 110vh; right: 200px }
40% {right: 500px}
75% {right: 400px}
0% {top: 110vh; right: 10.4vw }
40% {right: 26vw}
75% {right: 21vw}
90% {opacity: 100%; transform: scale(1);}
100% {top: 215vh; right: 200px; opacity: 10%; transform: scale(0.2);}
100% {top: 215vh; right: 10.4vw; opacity: 10%; transform: scale(0.2);}
}