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

relative-css #1

Merged
paul merged 2 commits from relative-css into main 2023-12-27 16:10:32 +01:00
Conversation 0 Commits 2 Files Changed 7 +261 -184
7 changed files with 261 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 94b352a2b2 - Show all commits

4
about.html
View File

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

26
animations.js
View File

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

7
index.html
View File

@ -23,7 +23,8 @@
</div> </div>
<div class="start"> <div class="start">
<div class="title"> <div class="title">
<h1>D<em>AI</em>A<br>LECT</h1> <h1>D<em>AI</em>A<br>
LECT</h1>
</div> </div>
<div id="blobs"> <div id="blobs">
<div id="blue" class="blob"></div> <div id="blue" class="blob"></div>
@ -42,7 +43,9 @@
</div> </div>
<div id="zwei"> <div id="zwei">
<div class = "text-mittig"> <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> </div>
<div id="navbar-bottom"> <div id="navbar-bottom">

82
style.css
View File

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