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

Question

我想像这样为视差中的文本添加效果（检查 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

当您说，'do you need plugins'...您是否正确设置了教程插件？从您链接到的教程（*按照步骤操作时效果很好）他们需要您安装 https://github.com/Prinzhorn/skrollr。我猜你可能还需要包括 jQuery 如果你还没有的话。

这看起来像更详细的教程：https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website

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

how to add curtain effect on parallax

html

css

parallax