catalog: ease-in images (#15)

facioquo · May 30, 2023 · 064b3c2 · 064b3c2
1 parent 453f75b
commit 064b3c2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/app/pages/card-catalog/catalog.component.html b/src/app/pages/card-catalog/catalog.component.html
@@ -39,7 +39,8 @@ <h2 class="usa-card__heading">{{ card.title }}</h2>
           </div>
           <div class="usa-card__media">
             <div class="usa-card__img">
-              <img ngSrc="{{ card.image }}" width=600 height=315 priority="{{(i<6)?true:false}}" alt="a random image" />
+              <img class="easeload" onload="this.style.opacity=1" ngSrc="{{ card.image }}" width="600" height="315"
+                priority="{{(i<6)?true:false}}" alt="a random image" />
             </div>
           </div>
           <div class="usa-card__body">
@@ -80,4 +81,4 @@ <h2 class="usa-card__heading">{{ card.title }}</h2>
       <button class="usa-button usa-button--unstyled" (click)="u.scrollToStart('top')">return to top</button>
     </li>
   </ul>
-</section>
+</section>
diff --git a/src/app/pages/card-catalog/catalog.component.scss b/src/app/pages/card-catalog/catalog.component.scss
@@ -7,15 +7,12 @@
 @forward "usa-button-group";
 
 .usa-card {
-
   a.usa-card__container {
-
     text-decoration: none;
     border-color: color($theme-color-base-lighter);
 
     // hover effect
     &:hover {
-
       .usa-card__header {
         text-decoration: underline;
         text-decoration-color: color($theme-color-base-light);
@@ -29,7 +26,6 @@
 
     // click effect
     &:active {
-
       background-color: color($theme-color-base-lighter);
 
       box-shadow:
@@ -38,16 +34,15 @@
         0px 9px 40px 2px color($theme-color-base-light, 0.12);
     }
 
-    // maintain image size proportion
+    // maintain image box size proportion
     .usa-card__img {
       aspect-ratio: 600/315;
-      background-color: color($theme-color-base);
+      background-color: color($theme-color-base-lighter);
     }
 
     // when above tablet size,
     // truncate the title and description
     @include at-media("tablet") {
-
       .usa-card__heading {
         display: -webkit-box;
         -webkit-line-clamp: 2;
@@ -69,6 +64,7 @@
   }
 }
 
+// button groups at bottom of page
 .usa-button-group {
   @include u-flex("justify-center");
 }
@@ -87,3 +83,14 @@
     }
   }
 }
+
+// fade in images after loading.
+// we're partly doing this since we're using a 3rd-party image source
+// that does not have a performant caching approach
+.easeload {
+  opacity: 0;
+  -webkit-transition: all 2s ease;
+  -moz-transition: all 2s ease;
+  -ms-transition: all 2s ease;
+  -o-transition: all 2s ease;
+}