refactor: bat animation and fixing styles

src/assets/components/bats/index.js

@@ -1,50 +1,59 @@
-import { useEffect } from 'react';
+import React, { useEffect } from "react";
 
-// Importando o GIF
-import batGif from '../../gifs/bat.gif';
+// Gif
+import batGif from "../../gifs/bat.gif";
+
+//Styles
+import * as S from "./style";
 
 const HalloweenBats = ({ numberOfBats }) => {
   useEffect(() => {
     const random = Math.random();
     const documentRef = document;
+    const bats = documentRef.getElementById("bats");
     const windowRef = window;
 
-    // Função para criar um morcego
     const createBat = () => {
-      const image = documentRef.createElement('img');
-      const container = documentRef.createElement('div');
+      const image = documentRef.createElement("img");
+      image.alt = "Bat animation";
+      image.draggable = false;
+      const container = documentRef.createElement("figure");
       const containerStyle = container.style;
 
-      containerStyle.position = 'fixed';
-      containerStyle.left = 0;
-      containerStyle.top = 0;
-      containerStyle.opacity = 0;
-      containerStyle.filter = 'invert(.2)';
-
       container.appendChild(image);
       image.src = batGif;
 
-      documentRef.body.appendChild(container);
+      bats.appendChild(container);
 
       let posX = windowRef.innerWidth * random;
       let posY = windowRef.innerHeight * random;
       let opacity = 0;
 
       function calculatePosition(oldPos, max) {
-        return Math.max(Math.min(oldPos + (Math.random() - 0.5) * 400, max - 50), 50);
+        return Math.max(
+          Math.min(oldPos + (Math.random() - 0.5) * 400, max - 50),
+          50
+        );
       }
 
       function animate() {
         const newX = calculatePosition(posX, windowRef.innerWidth);
         const newY = calculatePosition(posY, windowRef.innerHeight);
-        const distance = 5 * Math.sqrt((posX - newX) * (posX - newX) + (posY - newY) * (posY - newY));
+        const distance =
+          5 *
+          Math.sqrt(
+            (posX - newX) * (posX - newX) + (posY - newY) * (posY - newY)
+          );
 
         containerStyle.opacity = opacity;
         opacity = 1;
 
-        containerStyle.transition = containerStyle.transition = distance / 1000 + 's linear';
-        containerStyle.transform = containerStyle.transform = 'translate(' + newX + 'px,' + newY + 'px)';
-        image.style.transform = image.style.transform = posX > newX ? '' : 'scaleX(-1)';
+        containerStyle.transition = containerStyle.transition =
+          distance / 1000 + "s linear";
+        containerStyle.transform = containerStyle.transform =
+          "translate(" + newX + "px," + newY + "px)";
+        image.style.transform = image.style.transform =
+          posX > newX ? "" : "scaleX(-1)";
 
         posX = newX;
         posY = newY;
@@ -55,7 +64,7 @@ const HalloweenBats = ({ numberOfBats }) => {
       setTimeout(animate, random * 3000);
 
       return () => {
-        documentRef.body.removeChild(container);
+        bats.removeChild(container);
       };
     };
 
@@ -64,7 +73,7 @@ const HalloweenBats = ({ numberOfBats }) => {
     }
   }, [numberOfBats]);
 
-  return null;
+  return <S.BatsWrapper id="bats"></S.BatsWrapper>;
 };
 
-export default HalloweenBats;
+export default HalloweenBats;

src/assets/components/bats/style.js

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+export const BatsWrapper = styled.section`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  user-select: none;
+
+  figure {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    opacity: 0;
+    filter: invert(.3);
+    z-index: 1;
+  }
+`;

src/assets/pages/projects/index.js

@@ -11,8 +11,8 @@ export default function index() {
     return (
         <>
         <Layout backgroundFooter="#060d11">
-            <BatComponent numberOfBats={6} />
             <S.Main>
+            <BatComponent numberOfBats={10} />
             <S.ContentWrapper></S.ContentWrapper>
             </S.Main>
         </Layout>

src/assets/pages/projects/style.js

@@ -5,13 +5,7 @@ import Cave from "../../gifs/cave.gif";
 export const Main = styled.main`
   width: 100%;
   height: 100vh;
-  background-color: #0b1418;
-`;
-
-export const ContentWrapper = styled.section`
-  width: 100%;
-  height: 100%;
-  background: url(${Cave}) no-repeat center center/contain;
+  background: url(${Cave}) no-repeat center/cover;
   position: relative;
   z-index: 0;
 
@@ -22,4 +16,13 @@ export const ContentWrapper = styled.section`
     background: rgba(0, 10, 16, 0.7);
     z-index: 1;
   }
+
+  @media only screen and (width <= 768px) {
+    background-position: -20rem 0;
+  }
+`;
+
+export const ContentWrapper = styled.section`
+  width: 100%;
+  height: 100%;
 `;