Question

我想为我的视差中的文字添加效果就像这样（查看链接） - ＆gt; https://ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial/我该怎么做？我需要一些插件吗？无论如何，这是我的示例代码或检查此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

当你说'你需要插件'时......你有没有正确设置教程插件？从您链接到的教程（*在执行这些步骤时效果很好），他们需要您安装https://github.com/Prinzhorn/skrollr。猜猜你可能还需要包含jQuery，如果你还没有。

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

如何在视差

1 个答案: