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
Leave feedback about this