How do I create a scroll which is similar to this?

I am trying to create a similar scroll like this.

Now I have created a structure in reactjs but I am not able to figure the left side scroll when right side is sticky without using any library.

.project-section {
  height: 400vh;
  position: relative;
  background-color: lightcoral; 
}

.project-heading {
  display: flex;
  background-color: lightblue;
  font-size: var(--font-size-heading);
}

.project-heading-text {
  font-family: Campton-Font-Bold;
  font-size: var(--font-size-heading);
}

.project-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 300vh;
  background-color: lightsalmon;
}

.project-container-text {
  display: flex;
  flex-direction: column;
  width: 50%;
  justify-content: center; /* or space-around */
  align-items: center; /* Ensure this has a value, like 'center' */
  height: 300vh;
  border: 1px solid blue;
}

.project-text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  border: 1px solid yellow;
}

.project-container-images {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 50%;
  height: 300vh;
  border: 1px solid green;
  top: 0;
  bottom: 0;
  z-index: 1000;
  position: relative;
}

.project-image {
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 100vh;
  border: 1px solid black;
  flex-wrap: wrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
<section class="project-section" style="top: 0px;"><div class="project-heading"><span class="project-heading-text">Projects</span></div><div class="project-header"><div class="project-container-text"><span class="project-text">Text 1</span><span class="project-text">Text 2</span><span class="project-text">Text 3</span></div><div class="project-container-images" style="position: initial; top: 0px;"><span class="project-image">image1</span></div></div></section>

Functionality:

The Project headline should stick on top.
The Right side should also stick on top.
The Left side should be able to scroll and the text 1 and text 2 and text 3 should appear one by one while rest of the part should be sticky.

Bonus Question: As given in the link above, for reference, please let me know how to work on the image stack scrolling?

PS: cannot provide the github repo as it is a private project.

Note: I am using it in a react.js project.

You need to sign in to view this answers

Related Post