diff --git a/blob-animation.js b/blob-animation.js index 6aecaca..b83f9e4 100644 --- a/blob-animation.js +++ b/blob-animation.js @@ -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 ({ - 'top': t + 'px', - 'right': r + 'px', - 'animation': '0',}); + setTimeout (function () { + $("#blobs").css ({ + 'top': t + 'px', + 'right': r + 'px', + 'animation': '',}); + $("#green").css ({ 'animation': '' }) + $("#blue").css ({ 'animation': '' }) + $("#red").css ({ 'animation': '' }) stage = to; }, (dur*1000)-1) } \ No newline at end of file diff --git a/index.html b/index.html index 55e1aae..8cca5c0 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,9 @@ DAIALECT - + +
@@ -12,9 +13,9 @@

DAIA
LECT

-
-
-
+
+
+
@@ -26,5 +27,10 @@

*die in Grötzingen entwickelt wurde

+
+
+

MIT HILFE VON
KI ALLE
MENSCHEN VERSTEHEN

+
+
\ No newline at end of file diff --git a/resources/LeagueSpartan-Black.ttf b/resources/LeagueSpartan-Black.ttf new file mode 100644 index 0000000..3a75f67 Binary files /dev/null and b/resources/LeagueSpartan-Black.ttf differ diff --git a/resources/LeagueSpartan.ttf b/resources/LeagueSpartan.ttf new file mode 100644 index 0000000..c36ea8b Binary files /dev/null and b/resources/LeagueSpartan.ttf differ diff --git a/jquery-3.7.1.min.js b/resources/jquery-3.7.1.min.js similarity index 100% rename from jquery-3.7.1.min.js rename to resources/jquery-3.7.1.min.js diff --git a/style.css b/style.css index 1f8329b..828cab5 100644 --- a/style.css +++ b/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; @@ -6,129 +9,210 @@ body } .start { - display: flex; + display: flex; +} + +b { + text-align: right; } #eins { - display: flex; - justify-content: right; + display: flex; + justify-content: right; +} + +#zwei { + height: 100%; + width: 100%; + z-index: 10; } .text-rechts { - width: 46%; - margin-right: 100px; + width: 46%; + margin-right: 100px; +} + +h2 { + font-weight: bold; + font-size: 150px; + position: relative; + text-align: justify; + text-align-last: justify; + } #eins h2 { - font-weight: bold; - font-size: 150px; - position: relative; - text-align: justify; - text-align-last: justify; - display: flex; - line-height: 0.3; + 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; - text-align: right; - z-index: 60; + position: relative; + font-size: 20px; + text-align: right; + z-index: 60; } .main-title { - font-family: "League Spartan Black"; - font-size: 170px; - display: flex; - text-align: center; - justify-content: center; - align-items: center; - width: 60%; - height: 100%; - z-index: 100; - position: relative; - flex-direction: column; - opacity: 90%; - animation: raise 0.5s ease-in; + font-family: "League Spartan Black"; + font-size: 170px; + display: flex; + text-align: center; + justify-content: center; + align-items: center; + width: 60%; + height: 100%; + z-index: 100; + position: relative; + flex-direction: column; + opacity: 90%; + animation: raise 0.5s ease-in; } @keyframes raise { - 0% {z-index: 0; opacity: 0%;} - 70% {opacity: 50%;} - 100% {z-index: 100; opacity: 90%;} + 0% {z-index: 0; opacity: 0%;} + 70% {opacity: 50%;} + 100% {z-index: 100; opacity: 90%;} } body::before, body::after { - position: absolute; - left: 0; - top: 0; - content: ''; - width: 2048px; - height: 2048px; - z-index: 50; - opacity: 80%; + position: absolute; + left: 0; + top: 0; + content: ''; + width: 2048px; + height: 2048px; + z-index: 50; + opacity: 80%; } body::before { - background: url("noise-texture.svg"); - mix-blend-mode: soft-light; + background: url("noise-texture.svg"); + mix-blend-mode: soft-light; } #blobs { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - z-index: -2; - height: 100%; - width: 40%; - position: relative; - } - - - .blob { - border-radius: 200px; - filter: blur(60px); - width: 400px; - height: 350px; - top: 250px; - } - - .blue { - background-color: rgb(80, 80, 244); - position: relative; - right: 200px; - animation: appear 0.4s 0s ease-in; - } - - .green { - background-color: rgb(48, 227, 48); - position: relative; - top: -200px; - right: 150px; - animation: appear 0.4s -0.075s ease-in; - } - - .red { - background-color: rgb(255, 63, 63); - position: relative; - left: 60px; - top: -45px; - animation: appear 0.4s -0.15s ease-in; - } + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + z-index: -2; + height: 100%; + width: 40%; + position: relative; +} - @keyframes appear { - 0% {transform: scale(0); opacity: 0%;} - 60% {transform: scale(0.8)} - 80% {transform: scale(1.1); opacity: 100%;} - 100% {transform: scale(1)} - } +.blob { + border-radius: 200px; + filter: blur(60px); + width: 400px; + height: 350px; + top: 250px; +} + +#blue { + background-color: rgb(80, 239, 244); + position: relative; + right: 200px; + animation: appear 0.4s 0s ease-in; +} + +#green { + background-color: #86ec4f; + position: relative; + top: -200px; + right: 150px; + animation: appear 0.4s -0.075s ease-in; +} + +#red { + background-color: rgb(240, 75, 193); + position: relative; + left: 60px; + top: -45px; + animation: appear 0.4s -0.15s ease-in; +} + + +@keyframes appear { + 0% {transform: scale(0); opacity: 0%} + 60% {transform: scale(0.8)} + 80% {transform: scale(1.1); opacity: 100%} + 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} - } \ No newline at end of file