Parallax CSS Scroll with "Layers"

Question

I need to have a 'layered look' in a part of my homepage. Something like this below

http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html

Especially from Slide 3 to Slide 4 the way it shows the items starting from the bottom and then upwards

I tried this

body {
    margin: 0;
}

#main {
    height: 700px;
    position: relative;
    z-index: 2;
    background: blue;
}

#revealed-section {
    height: 400px;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: green;
}

#revealed-section-placeholder {
    height: 400px;
}

<div id="main">Scroll down!</div>
<div id="revealed-section-placeholder"></div>
<div id="revealed-section">
    <h1> Content here </h1> <br/><br/>
    <h1> Content here </h1> <br/><br/>
    <h1> Content here </h1> <br/><br/>
    <h1> Content here </h1> <br/><br/>
</div>

http://jsfiddle.net/qYbs7/1/

But my problem is that this works if its a complete Page solution, but once I want it as a component in my React page it doesn't work. The bottom: 0 for example goes to the very bottom of my homepage and its not containered in a div.

Maybe I'm overlooking something but it would be so much help if someone more experienced could make that code into a copy and paste react component ideally with tailwind.

Answer 1

You do not need position: fixed, because when you use a fixed position, the element is removed from the normal document flow, and no space is created for the element in the page layout.

This website uses an attribute called background-attachment. The background-attachment property sets whether a background image scrolls with the rest of the page or is fixed. On This website, especially from slide 3 to slide 4, it's better to say, it creates a fixed background image that appears slowly on scroll. You can read more about parallax scrolling in w3school. But you should know the background-attachment property is the key for creating parallax scrolling. Try this:

    <div id="main">Scroll down!</div>
    <div id="revealed-section">
        <h1> Content here </h1> <br /><br />
        <h1> Content here </h1> <br /><br />
        <h1> Content here </h1> <br /><br />
        <h1> Content here </h1> <br /><br />
    </div>

and this is css part:

#main {
    background-image: url("https://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/images/Slide4/desktop4.jpg");
    min-height: 700px;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

#revealed-section {
    height: 700px;
    width: 100%;
    background: green;
}

The output is this, similar to your example and w3school example