fonts + seite 3
This commit is contained in:
@ -1,31 +1,56 @@
|
||||
var stage = 0
|
||||
$(document).ready(function () {
|
||||
var height1 = $("#eins").height ();
|
||||
var height2 = $("#zwei").height ();
|
||||
console.log (height1, height2);
|
||||
$(window).scroll(function () {
|
||||
var pos = $(this).scrollTop ();
|
||||
console.log (pos);
|
||||
if (pos+600 >= height1 && stage == 0){ moveBlobs (1000, 1000, 1)}
|
||||
else if (stage == 1 && pos < 400){ moveBlobs (0,0,0) }
|
||||
if (stage ==1 && pos-200 >= height2) { console.log ( moveBlobs (2050, 600, 2))}
|
||||
else if (stage == 2 && pos < height2 ) { moveBlobs (1000, 1000, 1)}
|
||||
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) {
|
||||
var dur = 0.7
|
||||
var dur = 0.4
|
||||
if (stage < to) {
|
||||
$("#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 {
|
||||
$("#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',
|
||||
'right': r + 'px',
|
||||
'animation': '0',});
|
||||
'animation': '',});
|
||||
$("#green").css ({ 'animation': '' })
|
||||
$("#blue").css ({ 'animation': '' })
|
||||
$("#red").css ({ 'animation': '' })
|
||||
stage = to;
|
||||
}, (dur*1000)-1)
|
||||
}
|
||||
14
index.html
14
index.html
@ -3,8 +3,9 @@
|
||||
<head>
|
||||
<title>DAIALECT</title>
|
||||
<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>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="start">
|
||||
@ -12,9 +13,9 @@
|
||||
<h1>DAIA<br>LECT</h1>
|
||||
</div>
|
||||
<div id="blobs">
|
||||
<div class="blue blob"></div>
|
||||
<div class="red blob"></div>
|
||||
<div class="green blob"></div>
|
||||
<div id="blue" class="blob"></div>
|
||||
<div id="red" class="blob"></div>
|
||||
<div id="green" class="blob"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="eins">
|
||||
@ -26,5 +27,10 @@
|
||||
<p>*die in Grötzingen entwickelt wurde</p>
|
||||
</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>
|
||||
</html>
|
||||
BIN
resources/LeagueSpartan-Black.ttf
Normal file
BIN
resources/LeagueSpartan-Black.ttf
Normal file
Binary file not shown.
BIN
resources/LeagueSpartan.ttf
Normal file
BIN
resources/LeagueSpartan.ttf
Normal file
Binary file not shown.
104
style.css
104
style.css
@ -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
|
||||
{
|
||||
background-color: #FFE49F;
|
||||
@ -9,26 +12,58 @@ body
|
||||
display: flex;
|
||||
}
|
||||
|
||||
b {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#eins {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
#zwei {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.text-rechts {
|
||||
width: 46%;
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
#eins h2 {
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
font-size: 150px;
|
||||
position: relative;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
|
||||
}
|
||||
|
||||
#eins h2 {
|
||||
display: flex;
|
||||
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 {
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
@ -97,23 +132,23 @@ body::before {
|
||||
top: 250px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: rgb(80, 80, 244);
|
||||
#blue {
|
||||
background-color: rgb(80, 239, 244);
|
||||
position: relative;
|
||||
right: 200px;
|
||||
animation: appear 0.4s 0s ease-in;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: rgb(48, 227, 48);
|
||||
#green {
|
||||
background-color: #86ec4f;
|
||||
position: relative;
|
||||
top: -200px;
|
||||
right: 150px;
|
||||
animation: appear 0.4s -0.075s ease-in;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: rgb(255, 63, 63);
|
||||
#red {
|
||||
background-color: rgb(240, 75, 193);
|
||||
position: relative;
|
||||
left: 60px;
|
||||
top: -45px;
|
||||
@ -122,13 +157,62 @@ body::before {
|
||||
|
||||
|
||||
@keyframes appear {
|
||||
0% {transform: scale(0); opacity: 0%;}
|
||||
0% {transform: scale(0); opacity: 0%}
|
||||
60% {transform: scale(0.8)}
|
||||
80% {transform: scale(1.1); opacity: 100%;}
|
||||
80% {transform: scale(1.1); opacity: 100%}
|
||||
100% {transform: scale(1)}
|
||||
}
|
||||
|
||||
@keyframes move-down-1 {
|
||||
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);}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user