parallax.js parallax-slider parallax content and image

Question

http://pixelcog.github.io/parallax.js/

Hello world! I have a problem with the plugin above. I have managed to make several parallax backgrounds and can fill them with content no problem however in the documentation it mentions being able to use the parallax effect on content using the parallax-layer class and when I add that to my code the entire section becomes blank. When I remove the parallax-layer div my code works again but ultimately I want to affect the content with the parallax effect just as I do with the image. Anyone know what I'm doing wrong? Thanks :)

Heres the html...

<div class="parallax-window" data-parallax="scroll" data-image-src="background.jpg" style="padding:20px 30px;">
    <div class="parallax-slider">
<h1 style="color:rgba(255,255,255,1);font-size:10vw;margin:0;padding:0;text-shadow:-10px 10px 15px rgba(20,0,20,1);">Wally Gunn</h1>
    </div>
</div>

And the css...

.parallax-window {
    min-height: 400px;
    background: transparent;
}

I have also pasted this script at the bottom of my body

<script>
$('.parallax-window').parallax({
naturalWidth: 600,
naturalHeight: 400});
</script>

Answer 1

I solved this problem... Use:

<div class="parallax-window" data-parallax="scroll" data-image-src="https://tse1-mm.cn.bing.net/th?id=OIP.3iTMNkANw-FFI-x8vJqD4wHaDF&p=0&o=5&pid=1.1" data-z-index="-1">
    <div class="text">
        <h1>Simple Parallax Scrolling</h1>
    </div>
</div>

remember to set data-z-index to -1 , and elements in parallax-window will be shown.