From 9ff4633f1c6fe8dcc0cd3787d0dc84d3556aee5a Mon Sep 17 00:00:00 2001 From: emekauja Date: Thu, 29 Feb 2024 21:56:28 +0100 Subject: [PATCH] added css animations and restructure html --- assets/registered-trademark.svg | 1 + css/main.css | 260 +++++++++++++++++++++++++++++--- index.html | 157 ++++++++++--------- js/main.js | 2 + 4 files changed, 325 insertions(+), 95 deletions(-) create mode 100644 assets/registered-trademark.svg diff --git a/assets/registered-trademark.svg b/assets/registered-trademark.svg new file mode 100644 index 0000000..b93940f --- /dev/null +++ b/assets/registered-trademark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/main.css b/css/main.css index d69d6f0..fb58227 100644 --- 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; +} diff --git a/index.html b/index.html index 3dff035..a3e04f8 100644 --- a/index.html +++ b/index.html @@ -60,7 +60,7 @@
- +
- - - - - - - - - - - - - - - - - +
+ + + + + + + + + + + + + + + + + +
- hero side image + hero side image
@@ -202,7 +204,14 @@

Transactions

-
43K
+ +
+
42K
+
37K
+
35K
+
22K
+
21K
+

@@ -237,42 +246,44 @@

with our intuitive

- - - - - - - - - +
+ + + + + + + + + +
@@ -287,7 +298,7 @@

analytics services

Explore traffic sources, page behavior, conversions and more to gain deep insight into your audience. With us. your business doesn't just adapt- it evolves

-
+
@@ -322,11 +333,11 @@

-
R
-
a
-
m
-
o
-
s
+
R
+
a
+
m
+
o
+
s
@@ -387,9 +398,9 @@

-

Get Started

+

Get Started

Turn information into advantage! Start using
Ramos today. Sign up for a free trial.

-
+
@@ -409,7 +420,7 @@

Get Started

-

hello@ramos.com

 +

hello@ramos.com
@@ -439,12 +450,14 @@

Get Started

-

Ramos

+
+

Ramos

+
- barcode scan + barcode scan
diff --git a/js/main.js b/js/main.js index d48ce94..4ad965f 100644 --- a/js/main.js +++ b/js/main.js @@ -4,6 +4,8 @@ const observer = new IntersectionObserver((entries) => { console.log('entry ==>', entry); if (entry.isIntersecting) { entry.target.classList.add('animate'); + } else { + entry.target.classList.remove('animate'); } }); });