idle-animation

animations.js

@@ -1,6 +1,8 @@
 var stage = 0
+var a = ["..", ".", "", ".", "..", "..."]
+
 $(document).ready(function () {
-        var up = document.getElementById("upload")
+        up = document.getElementById("upload")
         if (up != null) {up.addEventListener ("click", ButtonPress)}
         var height1 = $("#eins").height ();
         var height2 = $("#zwei").height ();
@@ -13,7 +15,7 @@ $(document).ready(function () {
             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) {
@@ -59,13 +61,14 @@ function moveBlobs (t, r, to) {
 } 
 
 function ButtonPress () {
+    up.setAttribute ('disabled', 'disabled')
     document.body.style.cursor = "progress"
     $("#upload").css ({
         'cursor': 'not-allowed',
         'animation': 'text-in-out 1s'
     })
     setTimeout (function () {
-        document.getElementById("upload").textContent = "Verarbeite..."
+        up.textContent = "Verarbeite..."
         $("#upload").css ({
             'padding-right': '140px',
             'padding-left': '139px',
@@ -78,5 +81,16 @@ function ButtonPress () {
             'animation': 'border-in-out 2s infinite'
         })
     }, 1000)
+    setTimeout (function () {
+        textLoop (0)
+    }, 200)
+    
 }
 
+function textLoop (i){
+    setTimeout (function (){
+        up.textContent = "Verarbeite" + a[i]
+        if (i<5) { textLoop (++i)}
+        else { textLoop (0)}
+    }, 2000)
+}

style.css

@@ -4,7 +4,7 @@
 body
 {
 	background-color: #FFE49F; 
-  background-image: url("noise-texture.svg");
+  background-image: url("resources/noise-texture.svg");
   color: #E07A31;
   font-family: "League Spartan";
 }
@@ -210,7 +210,9 @@ button {
   background-color: rgb(80, 239, 244);
   position: relative;
   right: 200px;
+  z-index: 0;
   animation: appear 0.4s 0s ease-in;
+  animation: idle-blue s 0.4s infinite;
 }
 
 #green {
@@ -218,7 +220,9 @@ button {
   position: relative;
   top: -200px;
   right: 150px;
+  z-index: 2;
   animation: appear 0.4s -0.075s ease-in; 
+  animation: idle-green 5s 0.3s infinite;
 }
 
 #red {
@@ -226,7 +230,9 @@ button {
   position: relative;
   left: 60px;
   top: -45px;
+  z-index: 1;
   animation: appear 0.4s -0.15s ease-in; 
+  animation: idle-red 7s 0.3s infinite;
 }
 
 @keyframes text-in-out {
@@ -264,6 +270,33 @@ button {
   100% {transform: scale(1)}
 }
 
+@keyframes idle-blue {
+  0% {transform: scale(1); }
+  20% {transform: scale(1.4); }
+  40% {transform: scale(1.1);  transform: translateY(40px);}
+  60% {transform: scale(0.8);  transform: translateX(50px)}
+  80% {transform: scale(0.9); ;}
+  95% {transform: scale(1); ; transform: translateY(-40px); transform: translateX(-50px);}
+}
+
+@keyframes idle-green {
+  0% {transform: scale(1); }
+  20% {transform: scale(0.8); }
+  40% {transform: scale(1.1);  transform: translateY(70px);}
+  60% {transform: scale(0.9);  transform: translateX(-20px)}
+  80% {transform: scale(1.3); }
+  95% {transform: scale(1); ; transform: translateY(60px); transform: translateX(45px);}
+}
+
+@keyframes idle-red {
+  0% {transform: scale(1); ;}
+  20% {transform: scale(1.3); z-index: 3;}
+  40% {transform: scale(1.2); z-index: 2; transform: translateY(-60px);}
+  60% {transform: scale(0.7); z-index: 0; transform: translateX(-45px)}
+  80% {transform: scale(0.9); z-index: 0;}
+  95% {transform: scale(1); ; transform: translateY(60px); transform: translateX(45px);}
+}
+
 @keyframes move-down-1 {
   0% {top: 0px; right: 0px}
   100% {top: 0px; right: 1000px}