diff --git a/blob-animation.js b/animations.js similarity index 65% rename from blob-animation.js rename to animations.js index b83f9e4..17db5f0 100644 --- a/blob-animation.js +++ b/animations.js @@ -1,14 +1,17 @@ var stage = 0 $(document).ready(function () { + var up = document.getElementById("upload") + if (up != null) {up.addEventListener ("click", ButtonPress)} var height1 = $("#eins").height (); var height2 = $("#zwei").height (); + if (height1 < 300) {height1 += 550}; console.log (height1, height2); $(window).scroll(function () { var pos = $(this).scrollTop (); - if (stage ==1 && pos-200 >= height2) { console.log ( moveBlobs (2050, 600, 2))} + if (stage ==1 && pos-200 >= height2) { 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) } + else if ((stage == 1 && pos < height1-450)) { moveBlobs (0,0,0) } }) } ) @@ -53,4 +56,27 @@ function moveBlobs (t, r, to) { $("#red").css ({ 'animation': '' }) stage = to; }, (dur*1000)-1) -} \ No newline at end of file +} + +function ButtonPress () { + document.body.style.cursor = "progress" + $("#upload").css ({ + 'cursor': 'not-allowed', + 'animation': 'text-in-out 1s' + }) + setTimeout (function () { + document.getElementById("upload").textContent = "Verarbeite..." + $("#upload").css ({ + 'padding-right': '140px', + 'padding-left': '139px', + 'padding-top': '80px', + 'padding-bottom': '57px', + }) + }, 500) + setTimeout (function() { + $("#upload").css ({ + 'animation': 'border-in-out 2s infinite' + }) + }, 1000) +} + diff --git a/index.html b/index.html index b069ea6..d180bca 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ DAIALECT LOCAL - + @@ -22,7 +22,7 @@
-
+

DAIA
LECT

@@ -57,6 +57,6 @@
  • TRY NOW!
    • -
    +
    \ No newline at end of file diff --git a/noise-texture.svg b/noise-texture.svg index a7420a0..be1bad9 100644 --- a/noise-texture.svg +++ b/noise-texture.svg @@ -1,9 +1,7 @@ - - - - - - - - - + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css index a8dfca0..2cf5ee2 100644 --- a/style.css +++ b/style.css @@ -4,6 +4,7 @@ body { background-color: #FFE49F; + background-image: url("noise-texture.svg"); color: #E07A31; font-family: "League Spartan"; } @@ -126,7 +127,7 @@ p { z-index: 60; } -.main-title +.title { font-family: "League Spartan Black"; font-size: 170px; @@ -143,30 +144,48 @@ p { animation: raise 0.5s ease-in; } +.title h2{ + font-size: 150px; + text-align: right; + text-align-last: right; + padding-right: 140px; + padding-top: 150px; + font-family: "League Spartan"; +} + +.button-rechts { + height: 1000px; + position: relative; + top: 275px; + width: 46%; + margin-right: 100px; + justify-content: center; + display: block; +} + +button { + background-color: transparent; + border-style: dotted; + border-color: #E07A31; + border-width: 10px; + border-radius: 32px; + color: #E07A31; + padding-left: 25px; + padding-right: 25px; + padding-top: 25px; + padding-bottom: 20px; + text-decoration: none; + font-family: "League Spartan Black"; + font-size: 100px; + cursor: pointer; +} + @keyframes raise { 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%; -} - -body::before { - background: url("noise-texture.svg"); - mix-blend-mode: soft-light; -} - - #blobs { display: flex; flex-direction: column; @@ -210,6 +229,22 @@ body::before { animation: appear 0.4s -0.15s ease-in; } +@keyframes text-in-out { + 0% {color: inherit} + 40% {color: transparent} + 60% {color: transparent} + 100% {color: inherit} +} + +@keyframes border-in-out { + 0% {border-radius: 32px} + 10%{border-radius: 32px} + 40% {border-radius: 125px} + 60% {border-radius: 125px} + 90%{border-radius: 32px} + 100% {border-radius: 32px} +} + @keyframes float-in { 0% {transform: translateY(-100px); opacity: 0%} 100% {transform: translateY(0px); opacity: 90%;} diff --git a/try.html b/try.html new file mode 100644 index 0000000..8d656fb --- /dev/null +++ b/try.html @@ -0,0 +1,53 @@ + + + + DAIALECT LOCAL + + + + + + + +
    +
    +

    Jetzt Audiodatei hochladen und selbst testen!

    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + + + \ No newline at end of file