I'm a beginner in html, css, and javascript and I'm trying to create my first one-page website using the skrollr library. However, I'm facing an issue where the content in my second div is not displaying properly and is hidden behind the first div. You can view my code on jsfiddle.
<div id="please-scroll" data-0="opacity: 1;" data-800="opacity: 0;">
please scroll to see Dinosaurs life story
</div>
<div id="next_generation" data-800="opacity: 1;" data-1000="opacity: 0;">
please scroll moreeeeeeeeeeeeeeeeee
</div>
Here is the CSS code:
html, body {
margin:0;
padding:0;
height: 4500px;
width:100%;
}
#please-scroll {
position: absolute;
display: block;
height: 100%;
width: 100%;
background-color: red;
text-align: center;
z-index: 100;
}
#next_generation {
height: 100%;
width: 100%;
background-color: yellow;
text-align: center;
}