Merge pull request #375 from nwplus/hackcamp2023_info_events_transition

fix info events transition cutoff
nwplus · Nov 7, 2023 · b381ebc · b381ebc
2 parents 955c1fa + 0e60bd3
commit b381ebc
Show file tree

Hide file tree

Showing 6 changed files with 935 additions and 645 deletions.
diff --git a/public/assets/background/about/background.png b/public/assets/background/about/background.png
diff --git a/public/assets/background/about/deer.svg b/public/assets/background/about/deer.svg
diff --git a/public/assets/background/learn/background.png b/public/assets/background/learn/background.png
diff --git a/public/assets/mobile/about/background.png b/public/assets/mobile/about/background.png
diff --git a/public/assets/mobile/events/background.svg b/public/assets/mobile/events/background.svg
diff --git a/src/sections/Info.jsx b/src/sections/Info.jsx
@@ -8,8 +8,8 @@ const InfoContainer = styled.div`
   position: relative;
   height: auto;
 
-  overflow: hidden;
-  z-index: 12;
+  overflow: visible;
+  z-index: 99;
   
   width: 100%;
   aspect-ratio: 1440 / 1100;
@@ -86,11 +86,11 @@ const PushinP = styled.p`
 
 const fishingBearBob = keyframes`
   0%, 100% {
-    transform: translateY(0, -2vw);
+    transform: translateY(0, 2vw);
   }
 
   50% {
-    transform: translateY(-1vw);
+    transform: translateY(1vw);
   }
 `
 
@@ -102,10 +102,11 @@ const FishingBear = styled.div`
   background-position: bottom left;
 
   position: absolute;
-  top: -2vw;
-  left 4.75vw;
+  top: 0vw;
+  left: 4vw;
   width: 100%;
   height: 100%;
+  z-index: 99;
 
   ${(p) => p.theme.mediaQueries.mobile} {
     background-size: 67.5vw;
@@ -114,6 +115,20 @@ const FishingBear = styled.div`
   }
 `
 
+const Deer = styled.div`
+  background: url('assets/background/about/deer.svg');
+  background-size: 37.5vw;
+  background-repeat: no-repeat;
+  background-position: bottom right;
+
+  position: absolute;
+  top: 21.5vw;
+  left: 11vw;
+  width: 100%;
+  height: 100%;
+  z-index: 99;
+`
+
 const Info = () => {
   // const { ref: ref1 } = useParallax({
   //   speed: -30
@@ -146,6 +161,7 @@ const Info = () => {
         </PushinP>
       </TextContainer>
       <FishingBear />
+      <Deer />
     </InfoContainer>
   )
 }