Better Login Animation (#1384)

* Update login.html * Update login.html * Update login.html * Update login.html
MHSanaei · Dec 16, 2023 · 5971e3f · 5971e3f
1 parent 647b72e
commit 5971e3f
Showing 1 changed file with 76 additions and 30 deletions.
diff --git a/web/html/login.html b/web/html/login.html
@@ -56,35 +56,12 @@
       opacity: 1;
     }
   }
-  .wave {
-    opacity: 0.6;
-    position: absolute;
-    top: 80%;
-    left: 60%;
-    width: 6000px;
-    height: 6000px;
-    background-color: rgba(0, 135, 113, 0.08);
-    margin-left: -3000px;
-    transform-origin: 50% 50%;
-    pointer-events: none;
-    rotate: 115deg;
-  }
-  .wave2 {
-    opacity: 0.4;
-    rotate: 105deg;
-  }
-  .wave3 {
-    opacity: 0.2;
-    rotate: 62deg;
-  }
   .under {
-    background-color: #dbf5ed;
-  }
-  .dark .wave {
-    background: rgb(10 117 87 / 20%);
+    background-color: #c7ebe2;
+    z-index: 0;
   }
   .dark .under {
-    background-color: #101828;
+    background-color: #0f2d32;
   }
   .dark #login {
     background-color: #151f31;
@@ -95,7 +72,6 @@
   .ant-form-item {
     margin-bottom: 16px;
   }
-
   .ant-btn-primary-login {
     width: 100%;
   }
@@ -206,14 +182,84 @@
     background-position-x: 0;
     box-shadow: none;
   }
+  .waves-header {
+    position: fixed;
+    width: 100%;
+    text-align: center;
+    background-color: #dbf5ed;
+    color: white;
+    z-index: -1;
+  }
+  .dark .waves-header {
+    background-color: #101828;
+  }
+  .waves-inner-header {
+    height: 50vh;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+  .waves {
+    position: relative;
+    width: 100%;
+    height: 15vh;
+    margin-bottom: -5px; /*Fix for safari gap*/
+    min-height: 100px;
+    max-height: 150px;
+  }
+  .parallax > use {
+    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+  }
+  .dark .parallax > use {
+    fill: rgb(10 117 87 / 20%);
+  }
+  .parallax > use:nth-child(1) {
+    animation-delay: -2s;
+    animation-duration: 7s;
+    opacity: 0.2;
+  }
+  .parallax > use:nth-child(2) {
+    animation-delay: -3s;
+    animation-duration: 10s;
+    opacity: 0.4;
+  }
+  .parallax > use:nth-child(3) {
+    animation-delay: -4s;
+    animation-duration: 13s;
+    opacity: 0.6;
+  }
+  @keyframes move-forever {
+    0% {
+      transform: translate3d(-90px, 0, 0);
+    }
+    100% {
+      transform: translate3d(85px, 0, 0);
+    }
+  }
+  @media (max-width: 768px) {
+    .waves {
+      height: 40px;
+      min-height: 40px;
+    }
+  }
 </style>
 <body>
 <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
     <transition name="list" appear>
         <a-layout-content class="under" style="min-height: 0;">
-            <div class='wave'></div>
-            <div class='wave wave2'></div>
-            <div class='wave wave3'></div>
+            <div class="waves-header">
+                <div class="waves-inner-header"></div>
+                <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
+                    <defs>
+                        <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
+                    </defs>
+                    <g class="parallax">
+                        <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
+                        <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
+                        <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(0, 135, 113, 0.08)" />
+                    </g>
+                </svg>
+            </div>
             <a-row type="flex" justify="center" align="middle" style="height: 100%; overflow: auto;">
             <a-col :xs="22" :sm="20" :md="14" :lg="10" :xl="8" :xxl="6" id="login" style="margin: 3rem 0;">
             <a-row type="flex" justify="center">