Html 如何在视差上添加窗帘效果

我想为视差中的文本添加一个效果，就像这样（检查链接）->我怎么做？我需要一些插件吗？无论如何，这是我的示例代码，或者检查一下这个JSFIDLE

HTML：
在这里添加内容。。。
在这里添加内容。。。
在这里添加内容。。。
CSS:
.视差-bg1{
填充：300px0；
背景色：红色；
背景尺寸：封面；
背景附件：固定；
}
.视差-bg2{
填充：300px0；
背景颜色：蓝色；
背景尺寸：封面；
背景附件：固定；
}
.视差接触{
填充：300px0；
背景色：红色；
背景尺寸：封面；
背景附件：固定；
}
h1{
背景：无；
左侧填充：0；
右边填充：0；
颜色：黑色；
}

当你说“你需要插件吗”。。。您是否正确设置了教程插件？在您的教程中，您链接到（*在执行步骤时效果很好）他们需要您安装。猜测如果还没有包含jQuery，可能还需要包含jQuery

---

这看起来像更详细的教程：

从这个插件开始：另外，您提供的链接是教程的一部分。。。来吧是的。我复制了代码，但文字的窗帘效果不起作用。这就是我来这里寻求帮助的原因。不要无礼。

 HTML: 
<!--section 1 -->
 <section id="slide-1" class="homeSlide">
     <div class="content">
        <div class="parallax-bg1">  
             <h1>add content here...</h1>             
         </div>
     </div>            
 </section>




 <!--section 2 -->
<div class="content2">
    <div class="parallax-bg2">
        <h1> add content here...</h1>
     </div>
</div>        




<!--section 3 -->
<div class="content3">
    <div class="parallax-bg3">
        <h1> add content here...</h1>
     </div>
</div>        





 CSS: 
    .parallax-bg1 {
        padding:300px 0;
        background-color:red;
        background-size: cover;
        background-attachment: fixed;
        }

    .parallax-bg2 {
        padding:300px 0;
        background-color:blue;
        background-size: cover;
        background-attachment: fixed;
        }



      .parallax-contact{
        padding:300px 0;
        background-color: red;
        background-size: cover;
        background-attachment: fixed;
        }


    h1 {
        background: none;
        padding-left: 0;
        padding-right: 0;
        color:black;
        }