stacked cards | jialinhuang

Scroll down

<div
  key={color}
  css={css
    position: absolute;
    width: 100%;
    height: 1300px;
    z-index: 7;
  }
>
  <div
    css={css
      position: sticky;
      border-radius: 20px;
      height: 640px;
      top: 40px;
    }
  >

  </div>
</div>

<div
  key={color}
  css={css
    position: absolute;
    width: 100%;
    height: 1960px;
    z-index: 6;
  }
>
  <div
    css={css
      position: sticky;
      border-radius: 20px;
      height: 640px;
      top: 80px;
    }
  >

  </div>
</div>

<div
  key={color}
  css={css
    position: absolute;
    width: 100%;
    height: 2620px;
    z-index: 5;
  }
>
  <div
    css={css
      position: sticky;
      border-radius: 20px;
      height: 640px;
      top: 120px;
    }
  >

  </div>
</div>

<div
  key={color}
  css={css
    position: absolute;
    width: 100%;
    height: 3280px;
    z-index: 4;
  }
>
  <div
    css={css
      position: sticky;
      border-radius: 20px;
      height: 640px;
      top: 160px;
    }
  >

  </div>
</div>

<div
  key={color}
  css={css
    position: absolute;
    width: 100%;
    height: 3940px;
    z-index: 3;
  }
>
  <div
    css={css
      position: sticky;
      border-radius: 20px;
      height: 640px;
      top: 200px;
    }
  >

  </div>
</div>

Inspired by here

<div
  key={color}
  css={css
    position: absolute;
    width: 100%;
    height: 4680px;
    z-index: 1;
  }
>
  <div
    css={css
      position: sticky;
      border-radius: 20px;
      height: 200px;
      top: 280px;
    }
  >

  </div>
</div>