fix: home header camera zoom effect

dpaniq · Feb 17, 2024 · 1f7eaca · 1f7eaca
1 parent 44e3bbb
commit 1f7eaca
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -69,6 +69,7 @@ dialog {
 
     --lineWidth: 5px;
     --lineLength: 140px;
+    --lineLength: calc(100px + 2vh);
     --lineColor: whitesmoke;
     --linearGradientColor: linear-gradient(var(--lineColor), var(--lineColor));
     --lineColorPair: var(--linearGradientColor), var(--linearGradientColor);
@@ -103,7 +104,7 @@ dialog {
     top: 0;
     right: 0;
 
-    color: whitesmoke;
+    color: rgba(245, 245, 245, 0.5);
     font-size: 60px;
 
     animation: rec 3s infinite forwards step-end;

diff --git a/src/app/features/home-brand/home-brand.component.css b/src/app/features/home-brand/home-brand.component.css
@@ -15,16 +15,23 @@
   gap: 10px;
   flex-direction: column;
   width: calc(100vh - 80%);
-  filter: blur(3px);
 
-  animation: zoom ease-in-out 5s infinite;
+  padding: 40px;
+
+  img.studio {
+    padding: 10px 0;
+    border-top: 5px solid whitesmoke;
+  }
+
+  animation: zoom ease-in-out 5s;
   animation-direction: alternate;
   animation-timing-function: both;
 }
 
 @keyframes zoom {
   0% {
-    filter: none;
+    filter: blur(10px);
+    transform: scale3d(1.02, 1.02, 1);
   }
 
   33% {
@@ -34,14 +41,15 @@
   50% {
     filter: blur(1px);
     transform: scale(1.02);
+    transform: scale3d(1.02, 1.02, 1);
   }
 
-  33% {
+  66% {
     transform: scale(1.01);
   }
 
   100% {
-    filter: blur(3px);
-    transform: scale(1);
+    filter: none;
+    transform: none;
   }
 }
diff --git a/src/app/features/home-brand/home-brand.component.html b/src/app/features/home-brand/home-brand.component.html
@@ -3,7 +3,6 @@
     class="mk"
     src="assets/brand/mk.svg"
   />
-
   <img
     class="studio"
     src="assets/brand/studio.svg"