added css animations and restructure html

emekauja · Feb 29, 2024 · 9ff4633 · 9ff4633
1 parent e350475
commit 9ff4633
Show file tree

Hide file tree

Showing 4 changed files with 325 additions and 95 deletions.
diff --git a/assets/registered-trademark.svg b/assets/registered-trademark.svg
diff --git a/css/main.css b/css/main.css
@@ -38,6 +38,7 @@ h1 {
   /* font-weight: 600; */
   font-weight: 400;
   line-height: 1.2;
+  white-space: nowrap;
 }
 
 h2 {
@@ -187,6 +188,30 @@ h1 > span {
   }
 }
 
+@keyframes swingInBackwards {
+  0% {
+    opacity: 0;
+    transform: rotate(-540deg) scale(2);
+  }
+
+  100% {
+    opacity: 1;
+    transform: rotate(0) scale(1);
+  }
+}
+
+@keyframes swingInForwards {
+  0% {
+    opacity: 0;
+    transform: rotate(-540deg) scale(0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: rotate(0) scale(1);
+  }
+}
+
 @keyframes widthReveal {
   0% {
     width: 20%;
@@ -215,6 +240,163 @@ h1 > span {
   }
 }
 
+@keyframes scaleUpCenter {
+  0% {
+    /* -webkit-transform: scale(0); */
+    /* transform: scale(0); */
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.6;
+  }
+  100% {
+    /* -webkit-transform: scale(1);
+    transform: scale(1); */
+    opacity: 1;
+  }
+}
+
+@keyframes trackingInExpandFwd {
+  0% {
+    letter-spacing: -0.5em;
+    -webkit-transform: translateZ(-700px);
+    transform: translateZ(-700px);
+    opacity: 0;
+  }
+  40% {
+    opacity: 0.6;
+  }
+  100% {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+    opacity: 1;
+  }
+}
+
+@keyframes blurredReveal {
+  0% {
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes scaleUpHorLeft {
+  0% {
+    -webkit-transform: scaleX(0.4);
+    transform: scaleX(0.4);
+    -webkit-transform-origin: 0% 0%;
+    transform-origin: 0% 0%;
+  }
+  100% {
+    -webkit-transform: scaleX(1);
+    transform: scaleX(1);
+    -webkit-transform-origin: 0% 0%;
+    transform-origin: 0% 0%;
+  }
+}
+
+@keyframes flip {
+  0% {
+    margin-top: -450px;
+  }
+  5% {
+    margin-top: -360px;
+  }
+  20% {
+    margin-top: -360px;
+  }
+  25% {
+    margin-top: -270px;
+  }
+  40% {
+    margin-top: -270px;
+  }
+  45% {
+    margin-top: -180px;
+  }
+  60% {
+    margin-top: -180px;
+  }
+  65% {
+    margin-top: -90px;
+  }
+  80% {
+    margin-top: -90px;
+  }
+  85% {
+    margin-top: 0px;
+  }
+  99.99% {
+    margin-top: 0px;
+  }
+  100% {
+    margin-top: -450px;
+  }
+}
+
+/* CSS Animations ****************************** */
+
+.inanimate {
+  /* background-color: red; */
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion) {
+  .inanimate {
+    transition: none;
+  }
+}
+
+.animate {
+  animation: fadeInBottom 650ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 normal forwards, widthReveal 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.icon-swing.animate {
+  animation: swingInForwards 1s ease 0.65ms 1 normal forwards;
+}
+
+.play-icon.animate {
+  animation: scaleUpCenter 1s cubic-bezier(0.39, 0.575, 0.565, 1) 1.1s both;
+}
+
+.hero-img.animate {
+  animation: scaleUpCenter 0.75s cubic-bezier(0.39, 0.575, 0.565, 1) 0.75s both;
+}
+
+.logo-letter.animate,
+.percentage-icon.animate,
+.actions.animate,
+.icon.animate {
+  animation: blurredReveal 250ms cubic-bezier(0.39, 0.575, 0.565, 1) 0s both;
+}
+
+.logo-letter:nth-child(2) {
+  animation-delay: 400ms;
+}
+
+.logo-letter:nth-child(3) {
+  animation-delay: 550ms;
+}
+
+.logo-letter:nth-child(4) {
+  animation-delay: 700ms;
+}
+
+.logo-letter:nth-child(5) {
+  animation-delay: 850ms;
+}
+
+.footer-bottom__barcode.animate {
+  animation: scaleUpCenter 450ms cubic-bezier(0.39, 0.575, 0.565, 1) 0ms both;
+}
+
 /* Shared ****************************** */
 
 .grid {
@@ -263,6 +445,10 @@ h1 > span {
   max-width: 280px;
 }
 
+.actions > * + * {
+  gap: 0.5rem;
+}
+
 /* Content ****************************** */
 
 .header {
@@ -382,29 +568,19 @@ h1 > span {
   margin-left: 12rem;
 }
 
-.hero-middle h1 > span {
-  opacity: 0.25;
-}
-
-.hero-right__container > svg {
+.hero-right__container > .play-icon {
   position: absolute;
   top: -16px;
   left: -16px;
+  z-index: 2;
 }
 
-.inanimate {
-  /* background-color: red; */
-  opacity: 0;
-}
-
-@media (prefers-reduced-motion) {
-  .inanimate {
-    transition: none;
-  }
+.hero-middle .text h1 {
+  animation-delay: 150ms;
 }
 
-.animate {
-  animation: fadeInBottom 400ms ease-out 1 normal forwards, widthReveal 400ms cubic-bezier(0.71, 0, 0.33, 1.56);
+.hero-bottom .text h1 {
+  animation-delay: 250ms;
 }
 
 .marketing.container-secondary {
@@ -424,7 +600,7 @@ h1 > span {
 }
 
 .marketing-top > * + * {
-  margin-left: 2rem;
+  margin-left: 1rem;
 }
 
 .marketing-top__right {
@@ -446,6 +622,7 @@ h1 > span {
 
 .marketing-top__right {
   min-width: 650px;
+  flex: 1;
 }
 .marketing-top__left {
   width: 580px;
@@ -457,7 +634,7 @@ h1 > span {
   padding-top: 2rem;
   border: 1px solid var(--font-gray);
   border-radius: 1.25rem;
-
+  flex: 1;
   /* box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3); */
 }
 
@@ -555,18 +732,21 @@ h1 > span {
 }
 
 .marketing-top__left--card .transaction-card > .transaction-card__details p {
-  font-size: 0.5rem;
-  font-weight: 500;
+  font-size: 0.75rem;
+  padding-bottom: 1.5rem;
+
+  /* font-weight: 500; */
 }
 
 .marketing-top__left--card .transaction-card > .transaction-card__details div {
   font-size: 2.25rem;
-  font-weight: 400;
-  margin-top: 2.5rem;
+  font-weight: 500;
   /* font-weight: 500; */
 }
 
-.features-top {
+.features-top h1,
+.get-started h1 {
+  animation-delay: 200ms;
   /* display: flex;
   flex-direction: column; */
 }
@@ -850,3 +1030,37 @@ footer,
 .footer-address .address-detail {
   color: var(--font-gray);
 }
+
+.footer-logo {
+  position: relative;
+}
+
+.footer-logo::after {
+  content: 'R';
+  position: absolute;
+  color: var(--font-color);
+  font-size: 1rem;
+  font-weight: bold;
+  padding: 0 0.25rem;
+  border-radius: 50%;
+  border: 4px solid var(--font-color);
+  top: 16px;
+}
+
+/* Resource: https://www.sliderrevolution.com/resources/css-text-animation/ */
+#flip {
+  height: 50px;
+  overflow: hidden;
+}
+
+#flip > div > div {
+  color: #fff;
+  padding: 0px 10px;
+  height: 45px;
+  margin-bottom: 45px;
+  display: inline-block;
+}
+
+#flip.animate div:first-child {
+  animation: flip 2s cubic-bezier(0.23, 1, 0.32, 1.2) normal;
+}