How can I hide a parallax overflow?

Question

I have been trying to hide this overflow and I am currently stumped. I am a novice when it comes to creating websites. I was interested in how a parallax works, so I downloaded it from https://codepen.io/maja127/pen/VwwOvpv and tried using it in a website template. I tried hiding the using the regular overflow: hidden; but it did not work. I tried adding relative container and an absolute with different heights, but I can't seem to get it.

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>

VSM · Accepted Answer · 2019-11-27 04:29:05Z

Try this snippet, this will be helpful.

Remove margin-top value of .layer-3 class or set that value to 0.
And also make sure that the dimensions of all three layer images are same. Otherwise, it won't work 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>

Collectives™ on Stack Overflow

How can I hide a parallax overflow?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related