alles außer animation

animations.js

@@ -2,17 +2,24 @@ var stage = 0
 var a = ["..", ".", "", ".", "..", "..."]
 
 $(document).ready(function () {
-        up = document.getElementById("upload")
-        if (up != null) {up.addEventListener ("click", ButtonPress)}
+        upform = document.getElementById("fileupload")
+        uplabel = document.getElementById("filelabel")
+        upline = document.getElementById("formline")
+        upbtn = document.getElementById("upload")
+        if (upbtn != null) {upbtn.addEventListener ("click", ButtonPress)}
         var height1 = $("#eins").height ();
         var height2 = $("#zwei").height ();
         if (height1 < 300) {height1 += 550};
         console.log (height1, height2);
+        $("#fileselect").change(function() {
+            uplabel.textContent = this.files[0].name + " (Klick zum Ändern)"
+            changeFile ()
+          });
         $(window).scroll(function () {
             var pos = $(this).scrollTop ();
-            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)}
+            if (stage ==1 && pos-200 >= height2) { moveBlobs ("225vh", 600, 2)}
+            else if (stage == 2 && pos < height2 ) { moveBlobs ("95vh", 1000, 1)}
+            else if (stage == 0 && pos+600 >= height1){ moveBlobs ("95vh", 1000, 1)}
             else if ((stage == 1 && pos < height1-450)) { moveBlobs (0,0,0) }
         })
     }
@@ -50,46 +57,64 @@ function moveBlobs (t, r, to) {
     }
     setTimeout (function () {
         $("#blobs").css ({
-            'top': t + 'px',
+            'top': t,
             'right': r + 'px',
             'animation': '',});
+        $("#green").css ({ 'animation': 'appear 0.4s -0.075s ease-in' })
+        $("#blue").css ({ 'animation': 'appear 0.4s 0s ease-in' })
+        $("#red").css ({ 'animation': 'appear 0.4s 0.15s ease-in' })
+        stage = to;
+    }, (dur*1000)-10)
+
+    setTimeout (function () {
         $("#green").css ({ 'animation': '' })
         $("#blue").css ({ 'animation': '' })
         $("#red").css ({ 'animation': '' })
         stage = to;
-    }, (dur*1000)-1)
+    }, (dur*2000)-1)
 } 
 
-function ButtonPress () {
-    up.setAttribute ('disabled', 'disabled')
-    document.body.style.cursor = "progress"
+function changeFile (){
+    $("#filelabel").css ({
+        'font-family': 'League Spartan',
+        'font-size': '2.5vw'
+    })
     $("#upload").css ({
+        'color': 'inherit',
+        'cursor': 'pointer'
+    })
+    upbtn.removeAttribute("disabled")
+}
+
+function ButtonPress () {
+    upbtn.setAttribute ('disabled', 'disabled')
+    uplabel.setAttribute('hidden', 'hidden')
+    upline.setAttribute('hidden', 'hidden')
+    document.body.style.cursor = "progress"
+    $("#fileupload").css ({
         'cursor': 'not-allowed',
         'animation': 'text-in-out 1s'
+    })    
+    $("#upload").css ({
+        'cursor': 'not-allowed',
     })
     setTimeout (function () {
-        up.textContent = "Verarbeite..."
-        $("#upload").css ({
-            'padding-right': '140px',
-            'padding-left': '139px',
-            'padding-top': '80px',
-            'padding-bottom': '57px',
-        })
+        upbtn.value = "Verarbeite..."
+        $('#upload').css ({'padding-top': '3vw'})
     }, 500)
     setTimeout (function() {
-        $("#upload").css ({
+        $("#fileupload").css ({
             'animation': 'border-in-out 2s infinite'
         })
     }, 1000)
     setTimeout (function () {
         textLoop (0)
     }, 200)
-    
 }
 
 function textLoop (i){
     setTimeout (function (){
-        up.textContent = "Verarbeite" + a[i]
+        upbtn.value = "Verarbeite" + a[i]
         if (i<5) { textLoop (++i)}
         else { textLoop (0)}
     }, 2000)