feat: 🎸 add cover and smooth reveal transition.

index.html

@@ -39,15 +39,15 @@
           ></path>
         </svg>
       </div>
-      <div class="torque-cont info-box">
+      <div class="torque-cont info-box fade-in">
         <p>torque</p>
         <hr />
         <div class="info-base">
           <div class="digit-cont" data-counter="torque"></div>
           <span class="unit">nm</span>
         </div>
       </div>
-      <div class="power-cont info-box">
+      <div class="power-cont info-box fade-in">
         <p>power</p>
         <hr />
         <div class="info-base">
@@ -86,12 +86,12 @@
           alt=""
         />
       </div>
-      <div class="engine-cont info-box">
+      <div class="engine-cont info-box fade-in">
         <p>engine</p>
         <hr />
         <p id="engine"></p>
       </div>
-      <div class="acc-cont info-box">
+      <div class="acc-cont info-box fade-in">
         <p>acceleration</p>
         <hr />
         <p id="acceleration"></p>

mercedes.css

@@ -75,7 +75,7 @@ body {
     position: absolute;
     top: 50%;
     left: 50%;
-    transition: .4s ease-out;
+    transition: .5s ease-out;
     transform: translate(-50%, -50%);
     z-index: 5;
 }
@@ -106,7 +106,7 @@ body {
     grid-row: 3/4;
 }
 
-.info-box > p:first-child {
+.info-box > *:first-child {
     text-transform: uppercase;
     color: var(--text-color);
     font-weight: bold;
@@ -139,6 +139,24 @@ body {
     /* text-indent: 3rem; */
 }
 
+.fade-in > *:first-child {
+    opacity: 0;
+    transition: .5s ease-out;
+    transform: translateY(-80%);
+}
+
+.fade-in > *:last-child {
+    opacity: 0;
+    transition: .5s ease-out;
+    transform: translateY(80%);
+}
+
+.fade-in.play > *:first-child,
+.fade-in.play > *:last-child {
+    opacity: 1;
+    transform: translateY(0%);
+}
+
 .digit-cont {
     width: 2em;
     height: 1em;
@@ -153,7 +171,7 @@ body {
     display: inline-flex;
     top: 0;
     flex-direction: column;
-    transition: top .5s ease-in-out;
+    transition: top .7s cubic-bezier(.39, .58, .26, .85);
 }
 
 /* ---------------------- */
@@ -183,7 +201,6 @@ body {
     align-items: center;
     justify-content: center;
     text-align: center;
-    padding-right: 1rem;
     grid-column: 1 / 2;
     grid-row:  3 / 7;
 }

mercedes.js

@@ -1,4 +1,6 @@
 let counter = 0;
+const $ = sel => document.querySelector(sel);
+const $$ = sel => document.querySelectorAll(sel);
 const numbers = document.querySelectorAll("[id=numbers] p");
 
 const cars = [
@@ -128,7 +130,15 @@ const forArrowsOnly = closure => evt => {
 const sideNav = document.getElementById("side-nav");
 sideNav.addEventListener("click", forArrowsOnly(checker));
 
-const $ = sel => document.querySelector(sel);
+const loadImages = () => {
+  Object.values(cars).forEach(({ image: imageSrc }) => {
+    const image = document.createElement("img");
+    image.src = imageSrc;
+
+    $("#image").parentElement.append(image);
+  });
+};
+
 const resizeLogo = () => {
   const styles = {
     top: $(".logo-name").offsetTop + "px",
@@ -141,17 +151,22 @@ const resizeLogo = () => {
   });
   console.log($(".logo-name").offsetTop);
 };
+
 const hideBlind = () => {
   document.body.classList.add("hide-blind");
   resizeLogo();
 };
+
 window.onload = () => {
   const up = document.querySelector("[data-direction=down]");
   setupCounter("torque");
   setupCounter("power");
   setTimeout(() => {
     hideBlind();
+  }, 700);
+  setTimeout(() => {
     counter = -1;
     up.click();
-  }, 3000);
+    $$(".fade-in").forEach(el => el.classList.add("play"));
+  }, 1100);
 };