hero content responsive styles & title animation

BrandonWingerAir · Jan 26, 2024 · c9783a7 · c9783a7
1 parent b2acb0e
commit c9783a7
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 13 deletions.
diff --git a/images/pexels-scott-webb-2824173.jpg b/images/pexels-scott-webb-2824173.jpg
diff --git a/style.css b/style.css
@@ -101,8 +101,22 @@ h1 {
   -webkit-text-stroke: 100%;
   -webkit-text-stroke-color: black;
 }
+@keyframes filling {
+  from {
+    background-position: center 100%;
+  }
+  to {
+    background-position: center 0%;
+  }
+}
 #hero-content div h2:nth-of-type(2) {
   margin-top: -50px;
+  color: #757575;
+  background-image: url(/images/pexels-scott-webb-2824173.jpg);
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+  animation: filling 45s linear forwards;
+  animation-iteration-count: 3;
 }
 #hero-content div h2 span {
   font-size: 220px;
@@ -138,7 +152,7 @@ h1 {
 #scroll {
   position: absolute;
   z-index: 1;
-  top: 77%;
+  bottom: 11%;
   background: transparent;
   right: 25%;
   width: 120px;
@@ -232,7 +246,9 @@ footer {
     margin-top: 10px;
   }
   #hero-content #bg-img {
+    top: 19%;
     right: 12%;
+    opacity: 54%;
   }
   #scroll {
     z-index: -1;
@@ -284,22 +300,23 @@ footer {
   #hero-content #bg-img {
     top: 220px;
     width: 62vw;
-    opacity: 58%;
   }
   #scroll {
     z-index: 1;
     width: 94px;
     height: 94px;
-    top: 90%;
-    font-size: 18px;
+    bottom: 7%;
+    font-size: 13px;
   }
 }
 @media screen and (max-width: 488px) {
   #hero-content div h2 {
     font-size: 68px;
   }
   #scroll {
-    top: 87%;
+    width: 82px;
+    height: 82px;
+    bottom: 4%;
   }
 }
 @media screen and (max-width: 430px) {
@@ -319,7 +336,7 @@ footer {
     z-index: -1;
     width: 72px;
     height: 72px;
-    top: 79%;
+    bottom: 10%;
     font-size: 11px;
     font-weight: 600;
   }

diff --git a/style.css.map b/style.css.map
diff --git a/style.scss b/style.scss
@@ -53,8 +53,23 @@ h1 {
       -webkit-text-stroke: 100%;
       -webkit-text-stroke-color: black;
 
+      @keyframes filling {
+        from {
+          background-position: center 100%;
+        }
+        to {
+          background-position: center 0%;
+        }
+      }
+
       &:nth-of-type(2) {
         margin-top: -50px;
+        color: #757575;
+        background-image:  url(/images/pexels-scott-webb-2824173.jpg);
+        -webkit-text-fill-color: transparent;
+        -webkit-background-clip: text;
+        animation: filling 45s linear forwards;
+        animation-iteration-count: 3;
       }
 
       span {
@@ -98,7 +113,7 @@ h1 {
 #scroll {
   position: absolute;
   z-index: 1;
-  top: 77%;
+  bottom: 11%;
   background: transparent;
   right: 25%;
   width: 120px;
@@ -205,7 +220,9 @@ footer {
     }
 
     #bg-img {
+      top: 19%;
       right: 12%;
+      opacity: 54%;
     }
   }
 
@@ -268,16 +285,15 @@ footer {
     #bg-img {
       top: 220px;
       width: 62vw;
-      opacity: 58%;
     }
   }
 
   #scroll {
     z-index: 1;
     width: 94px;
     height: 94px;
-    top: 90%;
-    font-size: 18px;
+    bottom: 7%;
+    font-size: 13px;
   }
 }
 
@@ -287,7 +303,9 @@ footer {
   }
 
   #scroll {
-    top: 87%;
+    width: 82px;
+    height: 82px;
+    bottom: 4%;
   }
 }
 
@@ -311,7 +329,7 @@ footer {
     z-index: -1;
     width: 72px;
     height: 72px;
-    top: 79%;
+    bottom: 10%;
     font-size: 11px;
     font-weight: 600;
   }