如何隐藏视差溢出？

Question

我一直试图隐藏这个溢出，但我现在被难住了。当涉及到创建网站时，我是一个新手。我对视差的工作原理很感兴趣，所以我从https://codepen.io/maja127/pen/VwwOvpv下载了它，并尝试在网站模板中使用它。我试着用常规的overflow: hidden;来隐藏它，但它不起作用。我尝试添加具有不同高度的相对容器和绝对容器，但似乎无法获得它。

content overflowing

​

$(window).bind('scroll',function(e){
    parallaxScroll();
});

function parallaxScroll(){
   var scrolled = $(window).scrollTop(); 
   $('.layer-1').css('top',(0+(scrolled*.25))+'px');
   $('.layer-2').css('top',(0+(scrolled*.5))+'px');
   $('.layer-3').css('top',(0-(scrolled*0))+'px');
   $('.rock-1').css('top',(400-(scrolled*.8))+'px');
   $('.rock-2').css('top',(200-(scrolled*.6))+'px');
   $('.rock-3').css('top',(500-(scrolled*.4))+'px'); 
   $('.rock-4').css('top',(600-(scrolled*.5))+'px'); 
   $('.rock-5').css('top',(600-(scrolled*.7))+'px'); 
   $('.rock-6').css('top',(400-(scrolled*.7))+'px'); 
   $('.rock-7').css('top',(600-(scrolled*.5))+'px'); 
   $('.rock-8').css('top',(200-(scrolled*.2))+'px');
   $('.rock-9').css('top',(200-(scrolled*.4))+'px');
}

* {
  box-sizing: border-box;
}

.iframe-container2{
  position: relative;
  width: 100%;
  padding-bottom: 50%; 
  height: 0;
}

.iframe-container .content{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

.layer {
  position: absolute;
  background-position: center;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.layer-1 {
  background-image: url("../images/parralax/layer_w1.png");
    margin-top: 8%;
    overflow: hidden;
    background-repeat: no-repeat;
  z-index: -3;
}

.layer-2 {
  background-image: url("../images/parralax/layer_t1.png");
    background-repeat: no-repeat;
    overflow: hidden;
  z-index: -2;
}

.layer-3 {
  background-image:  url("../images/parralax/layer_l.png");
    margin-top: 21em;
    overflow: hidden;
    background-repeat: no-repeat;
  z-index: -1;
}

<!--        parallax -->
        <div class="iframe-container2">
            <div class="content">
                <div class="background">
                  <div class="layer layer-1"></div>
                  <div class="layer layer-2"></div>
                  <div class="layer layer-3"></div>
                </div>
            </div>
        </div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script><script  src="./script.js"></script>

​

Answer 1

试试这段代码，这会很有帮助的。

• Remove margin-top .layer-3 0__.
• And 0__.
• And value of class或将该值设置为 layer还可以确保所有三层图像的尺寸相同。否则，它不会工作，properly.

​

$(window).bind('scroll',function(e){
    parallaxScroll();
});

function parallaxScroll(){
   var scrolled = $(window).scrollTop(); 
   $('.layer-1').css('top',(0+(scrolled*0.25))+'px');
   $('.layer-2').css('top',(0+(scrolled*0.5))+'px');
   $('.layer-3').css('top',(0-(scrolled*0))+'px');
}

* {
  box-sizing: border-box;
}

.iframe-container2{
  position: relative;
  width: 100%;
  padding-bottom: 50%; 
  height: 0;
}

.iframe-container .content{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

.layer {
  position: absolute;
  background-position: center;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.layer-1 {
  background-image: url("https://i.imgur.com/bwEm8WB.png");
    /*margin-top: 8%;*/
    overflow: hidden;
    background-repeat: no-repeat;
  z-index: -3;
}

.layer-2 {
  background-image: url("https://i.imgur.com/XxTPjmC.png");
    background-repeat: no-repeat;
    overflow: hidden;
  z-index: -2;
}

.layer-3 {
  background-image:  url("https://i.imgur.com/F4xnzjU.png");
    /* margin-top: 21em; */
    overflow: hidden;
    background-repeat: no-repeat;
  z-index: -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- parallax -->
        <div class="iframe-container2">
            <div class="content">
                <div class="background">
                  <div class="layer layer-1"></div>
                  <div class="layer layer-2"></div>
                  <div class="layer layer-3"></div>
                </div>
            </div>
        </div>
<!-- partial -->
       <div class="">
         <div class="text">
           <p>In hac habitasse platea dictumst. Vivamus nec est et augue blandit aliquam quis non magna. Nunc velit nisi, porta ac libero in, porttitor placerat purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ut posuere quam. Aenean in leo mattis, convallis dolor vel, tempor lectus.</p>
           <p>Elit nulla vulputate ex, sed porta est risus ac lorem. Duis sed blandit felis. In hac habitasse platea dictumst. Vivamus nec est et augue blandit aliquam quis non magna. Nunc velit nisi, porta ac libero in, porttitor placerat purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ut posuere quam. Aenean in leo mattis, convallis dolor vel, tempor lectus.</p>
           <p>Duis sed blandit felis. Integer dictum, mi eget tristique semper, elit nulla vulputate ex, sed porta est risus ac lorem. In hac habitasse platea dictumst. Vivamus nec est et augue blandit aliquam quis non magna. Vestibulum ante ipsum primis.</p>
           <p>Integer dictum, mi eget tristique semper, elit nulla vulputate ex, sed porta est risus ac lorem. Duis sed blandit felis. In hac habitasse platea dictumst. Vivamus nec est et augue blandit aliquam quis non magna. Nunc velit nisi, porta ac libero in, porttitor placerat purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ut posuere quam. Aenean in leo mattis, convallis dolor vel, tempor lectus.</p>
         </div>
</div>

​