Merge pull request #1 from thales-victor/master

Fluidez do movimento do Gueio

Author: marcobrunodev

src/components/GueioVoante/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Wrapper, Gueio1, Gueio2, Gueio3 } from './styles';
+import { Wrapper } from './styles';
 
 
 const GueioVoante = () => (

src/components/GueioVoante/styles.js

@@ -3,42 +3,76 @@ import gueio1 from "../../img/gueio_voando1.png";
 import gueio2 from "../../img/gueio_voando2.png";
 import gueio3 from "../../img/gueio_voando3.png";
 
+const calcBase = 3;
+
 const voante = keyframes`
   0% {
     background-image: url(${gueio1});
-    transform: rotate(-15deg) scale(1.8);
+    transform: translateY(0) scale(1.8);
+  }
+  5% {
+    background-image: url(${gueio2});
+    transform: translateY(0) scale(1.8) rotate(calc(-1deg * ${calcBase}));
   }
   10% {
+    background-image: url(${gueio3});
+    transform: translateY(0) scale(1.8) rotate(calc(-2deg * ${calcBase}));
+  }
+  15% {
     background-image: url(${gueio2});
-    transform: rotate(10deg) translateY(-10px) scale(1.8);
+    transform: translateY(-5px) scale(1.8) rotate(calc(-3deg * ${calcBase}));
   }
   20% {
-    background-image: url(${gueio3});
-    transform: rotate(5deg) translateY(-10px) scale(1.8);
+    background-image: url(${gueio1});
+    transform: translateY(-5px) scale(1.8) rotate(calc(-4deg * ${calcBase}));
+  }
+  25% {
+    background-image: url(${gueio2});
+    transform: translateY(-5px) scale(1.8) rotate(calc(-5deg * ${calcBase}));
   }
   30% {
+    background-image: url(${gueio3});
+    transform: translateY(-5px) scale(1.8) rotate(calc(-5deg * ${calcBase}));
+  }
+  35% {
     background-image: url(${gueio2});
-    transform: rotate(5deg) translateY(-10px) scale(1.8);
+    transform: translateY(-10px) scale(1.8) rotate(calc(-5deg * ${calcBase}));
   }
   40% {
     background-image: url(${gueio1});
-    transform: rotate(5deg) translateY(-10px) scale(1.8);
+    transform: translateY(-10px) scale(1.8) rotate(calc(-2.5deg * ${calcBase}));
   }
-  70% {
+  45% {
+    background-image: url(${gueio2});
+    transform: translateY(-10px) scale(1.8);
+  }
+  50% {
+    background-image: url(${gueio3});
+    transform: translateY(-10px) scale(1.8);
+  }
+  55% {
+    background-image: url(${gueio2});
+    transform: translateY(-10px) scale(1.8);
+  }
+  60% {
     background-image: url(${gueio1});
-    transform: rotate(20deg) translateY(0px) scale(1.8);
+    transform: translateY(-10px) scale(1.8);
   }
-  85% {
+  65% {
     background-image: url(${gueio2});
-    transform: rotate(5deg) translateY(0px) scale(1.8);
+    transform: translateY(-10px) scale(1.8);
   }
-  95% {
+  70% {
     background-image: url(${gueio3});
-    transform: rotate(0deg) translateY(0px) scale(1.8);
+    transform: translateY(-10px) scale(1.8);
   }
-  100% {
+  75% {
     background-image: url(${gueio2});
-    transform: rotate(-5deg) translateY(0px) scale(1.8);
+    transform: translateY(-10px) scale(1.8);
+  }
+  80% {
+    background-image: url(${gueio1});
+    transform: translateY(-10px) scale(1.8);
   }
 `;
 
@@ -49,9 +83,5 @@ export const Wrapper = styled.figure`
   height: 19px;
   background-image: url(${gueio1});
   transform: scale(1.8);
-  animation: ${voante} 1.5s linear infinite;
+  animation: ${voante} 3s linear infinite;
 `;
-
-
-
-

src/components/MainJedi/index.js

@@ -7,6 +7,7 @@ export const MainJedi = styled.main`
   height: 100vh;
   border-left: 6px solid var(--color-gueio-primary);
   color: white;
+  overflow: hidden;
 
   & > ${BarJedi} {
     display:flex;