I am experimenting with having divs overlap each other as the page is scrolled using Skrollr. Initially, I was able to achieve the desired effect with two divs. However, when trying to incorporate a third div, only the first and last ones seem to work properly. I suspect that my understanding of how the data-anchor-target attribute in Skrollr functions may be incomplete. Below is the HTML code I am working with:
<div id="skrollr-body">
<div id="q1" data-0="top:0%;">
Text
</div>
<div id="q2" data-anchor-target="#q1" data--200-bottom="top:100%;" data-top-bottom="top:0%;">
Text2
</div>
<div id="q3" data-anchor-target="#q2" data--200-bottom="top:100%;" data-top-bottom="top:0%;">
Text3
</div>
</div>
Here is the corresponding CSS:
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#skrollr-body {
width:100%;
height:100%;
position:fixed;
}
#skrollr-body > div {
overflow:hidden;
position:absolute;
height: 100%;
width: 100%;
}
#q1 {
background: url(http://2.bp.blogspot.com/-RtoJ2papsoA/UhicT91ixmI/AAAAAAAACeg/2XEhv26ZFJc/s1600/jghjgh.jpg) center center no-repeat;
background-size: cover;
}
#q2 {
background: url(http://2.bp.blogspot.com/-RtoJ2papsoA/UhicT91ixmI/AAAAAAAACeg/2XEhv26ZFJc/s1600/jghjgh.jpg) center center no-repeat;
background-size: cover;
}
#q3 {
background: url(http://iwritealot.com/wp-content/uploads/2010/02/golden-clouds-wallpaper.jpg) center center no-repeat;
background-size: cover;
}
You can view the Fiddle here.
If anyone knows what might be causing only the first and last divs to behave correctly instead of all three, please share your insights. Thank you.