fonts + seite 3
This commit is contained in:
@ -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 () {
|
||||||
'top': t + 'px',
|
$("#blobs").css ({
|
||||||
'right': r + 'px',
|
'top': t + 'px',
|
||||||
'animation': '0',});
|
'right': r + 'px',
|
||||||
|
'animation': '',});
|
||||||
|
$("#green").css ({ 'animation': '' })
|
||||||
|
$("#blue").css ({ 'animation': '' })
|
||||||
|
$("#red").css ({ 'animation': '' })
|
||||||
stage = to;
|
stage = to;
|
||||||
}, (dur*1000)-1)
|
}, (dur*1000)-1)
|
||||||
}
|
}
|
||||||
14
index.html
14
index.html
@ -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
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.
260
style.css
260
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
|
body
|
||||||
{
|
{
|
||||||
background-color: #FFE49F;
|
background-color: #FFE49F;
|
||||||
@ -6,129 +9,210 @@ body
|
|||||||
}
|
}
|
||||||
|
|
||||||
.start {
|
.start {
|
||||||
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 150px;
|
||||||
|
position: relative;
|
||||||
|
text-align: justify;
|
||||||
|
text-align-last: justify;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#eins h2 {
|
#eins h2 {
|
||||||
font-weight: bold;
|
display: flex;
|
||||||
font-size: 150px;
|
line-height: 0.3;
|
||||||
position: relative;
|
}
|
||||||
text-align: justify;
|
|
||||||
text-align-last: justify;
|
#zwei h2 {
|
||||||
display: flex;
|
font-size: 180px;
|
||||||
line-height: 0.3;
|
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;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
z-index: 60;
|
z-index: 60;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-title
|
.main-title
|
||||||
{
|
{
|
||||||
font-family: "League Spartan Black";
|
font-family: "League Spartan Black";
|
||||||
font-size: 170px;
|
font-size: 170px;
|
||||||
display: flex;
|
display: flex;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 60%;
|
width: 60%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
opacity: 90%;
|
opacity: 90%;
|
||||||
animation: raise 0.5s ease-in;
|
animation: raise 0.5s ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes raise {
|
@keyframes raise {
|
||||||
0% {z-index: 0; opacity: 0%;}
|
0% {z-index: 0; opacity: 0%;}
|
||||||
70% {opacity: 50%;}
|
70% {opacity: 50%;}
|
||||||
100% {z-index: 100; opacity: 90%;}
|
100% {z-index: 100; opacity: 90%;}
|
||||||
}
|
}
|
||||||
|
|
||||||
body::before,
|
body::before,
|
||||||
body::after {
|
body::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
content: '';
|
content: '';
|
||||||
width: 2048px;
|
width: 2048px;
|
||||||
height: 2048px;
|
height: 2048px;
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
opacity: 80%;
|
opacity: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body::before {
|
body::before {
|
||||||
background: url("noise-texture.svg");
|
background: url("noise-texture.svg");
|
||||||
mix-blend-mode: soft-light;
|
mix-blend-mode: soft-light;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#blobs {
|
#blobs {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
z-index: -2;
|
z-index: -2;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 40%;
|
width: 40%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.blob {
|
.blob {
|
||||||
border-radius: 200px;
|
border-radius: 200px;
|
||||||
filter: blur(60px);
|
filter: blur(60px);
|
||||||
width: 400px;
|
width: 400px;
|
||||||
height: 350px;
|
height: 350px;
|
||||||
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;
|
||||||
animation: appear 0.4s -0.15s ease-in;
|
animation: appear 0.4s -0.15s ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@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 {
|
||||||
|
0% {top: 0px; right: 0px}
|
||||||
|
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);}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@keyframes move-down-1 {
|
|
||||||
0% {top: 0px; right: 0px}
|
|
||||||
100% {top: 1000px; right: 1000px}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user