Reputation: 3589
I'm building a website that has a horizontal parallax scrolling. However, for some strange reason I can't get the text on the first slide(I'm trying to get the words Home to show up on the page that it scrolls to after you click the Home button at the top) to show up. For all the other pages, the words all appear except not on the first one. I've tried this on JSFiddle (http://jsfiddle.net/LZfsV/) and it shows up, but just not on the page itself. I've tried debugging with Firebug, and Firebug tells me that the area where the text is supposed to show up is there, just I can't see it. Any ideas? Thanks!
HTML:
<div id="transition-slide-container">
<!--begin transition-slide-container-->
<div id="transition-slide">
<div class="slide" id="home">
<div id="inner-container">
<h1>home</h1>
</div>
<div class="center"></div>
</div>
<div class="slide" id="portfolio">
<div id="inner-container">
<h1>portfolio</h1>
</div>
</div>
<div class="slide" id="about">
<div id="inner-container">
<h1>about</h1>
</div>
</div>
<div class="slide" id="contact">
<div id="inner-container">
<h1>Contact</h1>
</div>
</div>
</div>
CSS:
div#transition-slide-container {
background: #bee1ff;
padding-top: 128px;
padding-bottom: 50px;
min-height: 100%;
width: 400%;
z-index: -1;
position: relative;
}
div#transition-slide {
white-space: nowrap;
left: 0;
}
.slide {
display: inline-block;
min-width: 24.999999%;
margin: 0 auto;
border-left: 1px #000 solid;
}
div#inner-container {
max-width: 960px;
text-align:center;
margin: 0 auto;
padding: 0;
}
Website: http://andrewgu12.kodingen.com/#home
Upvotes: 1
Views: 2771
Reputation: 577
Remove the
z-index: -1;
from the following
div#transition-slide-container {
background: #bee1ff;
padding-top: 128px;
padding-bottom: 50px;
min-height: 100%;
width: 400%;
z-index: -1;
position: relative;
}
Upvotes: 1
Reputation: 54659
There's a z-index of -1 defined for your container, remove it and you should be fine
div#transition-slide-container {
/* z-index: -1; remove this */
}
Upvotes: 1