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

fonts + seite 3

Browse Source
This commit is contained in:
Paul Martin
2023-11-10 15:41:41 +01:00
parent 765dc77f0a
commit bdf410665f
6 changed files with 222 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
blob-animation.js
View File

@ -1,31 +1,56 @@
var stage = 0 var stage = 0
$(document).ready(function () { $(document).ready(function () {
var height1 = $("#eins").height (); var height1 = $("#eins").height ();
var height2 = $("#zwei").height ();
console.log (height1, height2);
$(window).scroll(function () { $(window).scroll(function () {
var pos = $(this).scrollTop (); var pos = $(this).scrollTop ();
console.log (pos); if (stage ==1 && pos-200 >= height2) { console.log ( moveBlobs (2050, 600, 2))}
if (pos+600 >= height1 && stage == 0){ moveBlobs (1000, 1000, 1)} else if (stage == 2 && pos < height2 ) { moveBlobs (1000, 1000, 1)}
else if (stage == 1 && pos < 400){ moveBlobs (0,0,0) } else if (stage == 0 && pos+600 >= height1){ moveBlobs (1000, 1000, 1)}
else if (stage == 1 && pos < height1-450){ moveBlobs (0,0,0) }
}) })
} }
) )
function moveBlobs (t, r, to) { function moveBlobs (t, r, to) {
var dur = 0.7 var dur = 0.4
if (stage < to) { if (stage < to) {
$("#blobs").css ({ $("#blobs").css ({
'animation': 'move-down-'+ to + ' ease-in-out '+dur+ 's' 'animation': 'move-down-' + to +' ease-out '+dur+ 's'
})
$("#green").css ({
'animation': 'green-move-down-'+ to + ' ease-in '+dur+ 's'
})
$("#red").css ({
'animation': 'red-move-down-'+ to + ' ease-in '+dur+ 's'
})
$("#blue").css ({
'animation': 'blue-move-down-'+ to + ' ease-in '+dur+ 's'
}) })
} }
else { else {
$("#blobs").css ({ $("#blobs").css ({
'animation': 'move-down-'+(to+1)+' ease-in-out '+dur+'s reverse' 'animation': 'move-down-' +(to+1)+ ' ease-out '+dur+'s reverse'
})
$("#green").css ({
'animation': 'green-move-down-'+ (to+1) + ' ease-in '+dur+ 's reverse'
})
$("#red").css ({
'animation': 'red-move-down-'+ (to+1) + ' ease-in '+dur+ 's reverse'
})
$("#blue").css ({
'animation': 'blue-move-down-'+ (to+1) + ' ease-in '+dur+ 's reverse'
}) })
} }
setTimeout (function () {$("#blobs").css ({ setTimeout (function () {
$("#blobs").css ({
'top': t + 'px', 'top': t + 'px',
'right': r + 'px', 'right': r + 'px',
'animation': '0',}); 'animation': '',});
$("#green").css ({ 'animation': '' })
$("#blue").css ({ 'animation': '' })
$("#red").css ({ 'animation': '' })
stage = to; stage = to;
}, (dur*1000)-1) }, (dur*1000)-1)
} }

14
index.html
View File

@ -3,8 +3,9 @@
<head> <head>
<title>DAIALECT</title> <title>DAIALECT</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-3.7.1.min.js"></script> <script type="text/javascript" src="resources/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="blob-animation.js"></script> <script type="text/javascript" src="blob-animation.js"></script>
</head> </head>
<body> <body>
<div class="start"> <div class="start">
@ -12,9 +13,9 @@
<h1>DAIA<br>LECT</h1> <h1>DAIA<br>LECT</h1>
</div> </div>
<div id="blobs"> <div id="blobs">
<div class="blue blob"></div> <div id="blue" class="blob"></div>
<div class="red blob"></div> <div id="red" class="blob"></div>
<div class="green blob"></div> <div id="green" class="blob"></div>
</div> </div>
</div> </div>
<div id="eins"> <div id="eins">
@ -26,5 +27,10 @@
<p>*die in Grötzingen entwickelt wurde</p> <p>*die in Grötzingen entwickelt wurde</p>
</div> </div>
</div> </div>
<div id="zwei">
<div class = "text-mittig">
<h2> MIT HILFE VON <br> KI ALLE <br> <small> MENSCHEN VERSTEHEN </small></h2>
</div>
</div>
</body> </body>
</html> </html>

BIN
resources/LeagueSpartan-Black.ttf Normal file
View File

Binary file not shown.

BIN
resources/LeagueSpartan.ttf Normal file
View File

Binary file not shown.

0
jquery-3.7.1.min.js → resources/jquery-3.7.1.min.js vendored
View File

104
style.css
View File

@ -1,3 +1,6 @@
@font-face { font-family: "League Spartan"; src: url("resources/LeagueSpartan.ttf");}
@font-face { font-family: "League Spartan Black"; src: url("resources/LeagueSpartan-Black.ttf");}
body body
{ {
background-color: #FFE49F; background-color: #FFE49F;
@ -9,26 +12,58 @@ body
display: flex; display: flex;
} }
b {
text-align: right;
}
#eins { #eins {
display: flex; display: flex;
justify-content: right; justify-content: right;
} }
#zwei {
height: 100%;
width: 100%;
z-index: 10;
}
.text-rechts { .text-rechts {
width: 46%; width: 46%;
margin-right: 100px; margin-right: 100px;
} }
#eins h2 { h2 {
font-weight: bold; font-weight: bold;
font-size: 150px; font-size: 150px;
position: relative; position: relative;
text-align: justify; text-align: justify;
text-align-last: justify; text-align-last: justify;
}
#eins h2 {
display: flex; display: flex;
line-height: 0.3; line-height: 0.3;
} }
#zwei h2 {
font-size: 180px;
line-height: 1.8;
}
.text-mittig {
display: flex;
justify-content: center;
width: 90%;
margin-left: 5%;
margin-right: 5%;
}
.text-mittig small {
font-size: 155px;
}
p { p {
position: relative; position: relative;
font-size: 20px; font-size: 20px;
@ -97,23 +132,23 @@ body::before {
top: 250px; top: 250px;
} }
.blue { #blue {
background-color: rgb(80, 80, 244); background-color: rgb(80, 239, 244);
position: relative; position: relative;
right: 200px; right: 200px;
animation: appear 0.4s 0s ease-in; animation: appear 0.4s 0s ease-in;
} }
.green { #green {
background-color: rgb(48, 227, 48); background-color: #86ec4f;
position: relative; position: relative;
top: -200px; top: -200px;
right: 150px; right: 150px;
animation: appear 0.4s -0.075s ease-in; animation: appear 0.4s -0.075s ease-in;
} }
.red { #red {
background-color: rgb(255, 63, 63); background-color: rgb(240, 75, 193);
position: relative; position: relative;
left: 60px; left: 60px;
top: -45px; top: -45px;
@ -122,13 +157,62 @@ body::before {
@keyframes appear { @keyframes appear {
0% {transform: scale(0); opacity: 0%;} 0% {transform: scale(0); opacity: 0%}
60% {transform: scale(0.8)} 60% {transform: scale(0.8)}
80% {transform: scale(1.1); opacity: 100%;} 80% {transform: scale(1.1); opacity: 100%}
100% {transform: scale(1)} 100% {transform: scale(1)}
} }
@keyframes move-down-1 { @keyframes move-down-1 {
0% {top: 0px; right: 0px} 0% {top: 0px; right: 0px}
100% {top: 1000px; right: 1000px} 100% {top: 0px; right: 1000px}
} }
@keyframes green-move-down-1 {
0% {top: 0px; right: 0px }
50% {right: 400px}
90% {top: 750px; opacity: 100%; right: 190px; transform: scale(1);}
100% {top: 1000px; right: 200px; opacity: 20%; transform: scale(0.2);}
}
@keyframes red-move-down-1 {
0% {top: 0px; right: 0px }
90% {top: 850px; opacity: 100%; transform: scale(1);}
100% {top: 1000px; right: 0px; opacity: 20%; transform: scale(0.2);}
}
@keyframes blue-move-down-1 {
0% {top: 0px; right: 0px }
40% {right: 400px}
75% {right: 300px}
90% {opacity: 100%; transform: scale(1);}
100% {top: 1100px; right: 0px; opacity: 20%; transform: scale(0.2);}
}
@keyframes move-down-2 {
0% {top: 0px; right: 1000px}
100% {top: 0px; right: 600px}
}
@keyframes green-move-down-2 {
0% {top: 1000px; right: 0px }
50% {right: 400px}
90% {top: 1750px; opacity: 100%; right: 190px; transform: scale(1);}
100% {top: 2050px; right: 0px; opacity: 20%; transform: scale(0.2);}
}
@keyframes red-move-down-2 {
0% {top: 1000px; right: 0px }
90% {top: 1850px; opacity: 100%; transform: scale(1);}
100% {top: 2050px; right: 0px; opacity: 20%; transform: scale(0.2);}
}
@keyframes blue-move-down-2 {
0% {top: 1100px; right: 200px }
40% {right: 500px}
75% {right: 400px}
90% {opacity: 100%; transform: scale(1);}
100% {top: 2150px; right: 200px; opacity: 20%; transform: scale(0.2);}
}