Vertical Fullscreen Scroller In Pure JavaScript – Z-Index Scroll

Preview:

Description:

A JS/CSS fullscreen scroller where the current content section will cover the previous one on vertical page scrolling.

How to use it:

Add sectioned content to your html page as these:

<main role="main">
  <!-- Image -->
  <section class="image">
    <div class="image__bg" style="background-image: url('1.jpg');"></div>
  </section>
   
  <!-- Image -->
  <section class="image">
    <div class="image__bg" style="background-image: url('2.jpg');"></div>
  </section>
  <!-- Image -->
  <section class="image">
    <div class="image__bg" style="background-image: url('3.jpg');"></div>
  </section>
  
</main>

Make the sections full window no matter how you resize the browser.

.image {
  position: relative;
  height: 100vh;
  width: 100%;
}

The main JavaScript to activate the z-index scroll effect.

var OpacityScroll = (function() {
  var s;
  return {
    settings: {
      windowHeight: window.innerHeight,
      halfWindowHeight: window.innerHeight / 2,
      documentHeight: document.body.scrollHeight,
    },
    init: function(page) {
      s = this.settings;
      this.bindEvents(page);
    },
    bindEvents: function(page) {
      var children = document.querySelectorAll('.' + page + ' main')[0].children;
      [].forEach.call(children, function(child, idx) {
        child.style.left = 0;
        if (idx === 0) {
          child.style.position = 'fixed';
          child.style.top = 0;
          child.style.zIndex = 0;
        } else {
          child.style.position = 'absolute';
          child.style.top = idx + '00vh';
          child.style.zIndex = idx;
          var scrollOffset = child.getBoundingClientRect().top + document.body.scrollTop,
              opacityTrigger = s.windowHeight * idx - s.halfWindowHeight;
          window.addEventListener('resize', function() {
            scrollOffset = child.getBoundingClientRect().top + document.body.scrollTop;
            s.windowHeight = window.innerHeight;
            s.halfWindowHeight = s.windowHeight / 2;
            s.documentHeight = document.body.scrollHeight;
            opacityTrigger = s.windowHeight * idx - s.halfWindowHeight;
          });
          window.addEventListener('scroll', opacityChange);
          window.addEventListener('resize', opacityChange);
          function opacityChange() {
            var scrollTop = document.body.scrollTop,
                _prev = child.previousElementSibling,
                opacity = 1 - (scrollTop - opacityTrigger) / scrollTop * idx * 2;
            if (scrollTop >= opacityTrigger) {
              opacity > 0 ? _prev.style.opacity = opacity : _prev.style.opacity = 0;
            } else {
              _prev.style.opacity = 1;
            }
            if (scrollTop >= scrollOffset && scrollTop + s.windowHeight !== s.documentHeight) {
              child.style.position = 'fixed';
              child.style.top = 0;
            } else { 
              child.style.position = 'absolute';
              child.style.top = idx + '00vh';
              child.style.left = 0;
              child.style.zIndex = idx;
            }
          }
        }
      });
    },
  };
})();
OpacityScroll.init('example');