htmlcssparallaxskrollr

How to remove whitespace in parallax effect on skrollr


I have a problem to remove whitespace that i got when using skrollr to make parallax effect. I already search and try for solution that i got from a lot of topic about it, but still i can't find anything to solve this, I already tried using forceheight but it still not work

this is my HTML:

var s = skrollr.init({
  forceHeight: false
});
* {
  margin: 0px;
  padding: 0px;
}

html {
  overflow: scroll;
}

body {
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
  /* make scrollbar transparent */
}

body h1,
body h2 {
  font-family: 'Niconne', cursive;
}

.overlay {
  background: rgba(0, 0, 0, 0.5);
}

.bg-conf {
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  min-height: 100vh;
}

.main-container {
  display: table;
  table-layout: fixed;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  /* opacity: 0; */
}

.content-container {
  max-width: 450px;
  margin: -150px auto 0 auto;
  display: table-cell;
  vertical-align: middle;
  color: black;
  padding: 0 8%;
  text-align: center;
}

img .img-round {
  /* object-fit: cover; */
  border-radius: 50%;
}


/* Slide 1 */

#slide-1 .bg-conf {
  background-image: url('../img/Slide-1.jpg');
}
<section id="slide-1" style="min-height: 100vh;">
  <div class="overlay">
    <div class="bg-conf" data-center="background-position: 50% 0px" data-top-bottom="50% -100px" data-anchor-target="#slide-1">
      <div class="main-container">
        <div class="content-container" data-center="opacity: 1" data-110-top="opacity: 0" data-anchor-target="#slide-1 h1">
          <img class="img-rounded" src="img/profile.jpg" alt="profile" style="border-radius: 50%; width: 150px; height: 150px; object-fit: cover;">
          <h1>If you don't believe in yourself</h1>
          <h1>then just believe in me who believe in you</h1>
          <h2>&minus; Rakish F</h2>
        </div>
      </div>
    </div>
  </div>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>

can someone help me? I already read almost all of the thread about whitespace in skrollr but still not one can help me to solve this

this is the whitespace that i got

this is the whitespace that i got


Solution

  • "overflow: scroll;" is causing the white space you can try "overflow: auto;", but I would recommend creating a parallax effect with a different approach and not using Skrollr.