feat(genesis landing): change behaviour of backgroud img

DXgovernance#24 DXgovernance#34 DXgovernance#37
rulfo71 · Sep 28, 2022 · 2712f35 · 2712f35
1 parent 075f465
commit 2712f35
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 29 deletions.
diff --git a/src/pages/Genesis/index.js b/src/pages/Genesis/index.js
@@ -19,28 +19,23 @@ import { calculateDropStyle } from '../../common/calculateDropStyle'
 export default function Genesis() {
   const organizersRef = useRef()
   const dropRef = useRef()
+  const genesisContainer = useRef()
 
   const scrollPosition = useScrollPosition()
-  // calculate ring background img position and opacity
-  let backgroundImgPosition = `${scrollPosition}px`
   let dropPosition = dropRef?.current?.offsetTop
-  let opacityBackground =
-    1 - scrollPosition / (dropPosition - window.innerHeight)
-  let displayBackground = scrollPosition > dropPosition ? 'none' : 'block'
+
+  window.onscroll = function () {
+    if (scrollPosition > 0) {
+      var opac = scrollPosition / dropPosition
+      genesisContainer.current.style.boxShadow = `inset 0 0 0 1000px rgba(0,0,0,${opac})`
+    }
+  }
 
   const { dropImgWidth, backgroundDropPosition, displaybackgroundDrop } =
     calculateDropStyle(scrollPosition, dropPosition)
 
   return (
     <>
-      <div
-        className='background-image'
-        style={{
-          top: `${backgroundImgPosition}`,
-          opacity: `${opacityBackground}`,
-          display: `${displayBackground}`,
-        }}
-      ></div>
       <div
         className='background-drop'
         style={{
@@ -56,7 +51,7 @@ export default function Genesis() {
           style={{ maxWidth: `${dropImgWidth}%` }}
         />
       </div>
-      <section className='genesisContainer'>
+      <section className='genesisContainer' ref={genesisContainer}>
         <Header active='genesis' />
         <div className='genesisMainText'>
           <strong>Introducing Infinite Genesis in Bogotá</strong>

diff --git a/src/static/genesis-background-square-low.png b/src/static/genesis-background-square-low.png
diff --git a/src/styles/Genesis.css b/src/styles/Genesis.css
@@ -1,21 +1,10 @@
 .genesisContainer {
-  min-height: 100vh;
-  padding: 50px;
-  position: relative;
-}
-
-.background-image {
-  background-image: url('../static/genesis-background-square-low-half.png');
+  background-image: url('../static/genesis-background-square-low.png');
   background-repeat: no-repeat;
-  background-size: cover;
-  background-position: top;
   background-attachment: fixed;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: auto;
-  min-height: 120vh;
+  background-size: 100%;
+  background-position: center;
+  padding: 1rem;
 }
 
 .background-drop {