how to add curtain effect on parallax

Question

i want to add an effect for the text in my parallax just like this (check the link) -> https://ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial/ how can i do this? do i need some plugins? anyway here's my sample code or check this jsfiddle https://jsfiddle.net/hfnm54yb/

 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;
        }

Answer 1

When you say, 'do you need plugins'... Have you set up the tutorial plugins correctly? From your tutorial you linked to (*which works quite well when following the steps) they need you to install https://github.com/Prinzhorn/skrollr. Guessing you'll probably also need to include jQuery if you haven't already.

This looks like the more detailed tutorial: https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website