javascript - 如何隐藏视差溢出？

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

试试这个片段，这会很有帮助。

• 删除 .layer-3 类的 margin-top 值或将该值设置为 0 .

• 还要确保所有三层图像的尺寸相同。否则无法正常工作。

$(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>