JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div class="break"></div>


    <div id="viewportMask"></div>
    <div class="container-parallax">
      <div class="text-overlay text-overlay_1 show"></div>
      <figure>
        <div class="parallax-window" data-speed="0" data-parallax="scroll" data-image-src="https://images.unsplash.com/photo-1553450646-bd2a35fa7c9f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"></div>
      </figure>
      <div class="text-overlay text-overlay_2 show"></div>
      <figure>
        <div class="parallax-window" data-speed="0" data-parallax="scroll" data-image-src="https://images.unsplash.com/reserve/j6U5Qpi5SqWmVIX8AdrZ_Sahara2.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&s=69036cbcb0d9e7f46e333729111a7057"></div>
      </figure>
      <div class="text-overlay text-overlay_3 show"></div>
      <figure>
        <div class="parallax-window" data-speed="0" data-parallax="scroll" data-image-src="https://images.unsplash.com/photo-1553601332-87cfcb5dc015?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80"></div>
      </figure>
    </div>



    <!-- Javascript -->

  <script defer type="text/javascript" src="https://pixelcog.github.io/parallax.js/js/parallax.min.js"></script>

CSS

figure {
  margin: 0;
  padding: 0;
}

.container-parallax {
  height: auto;
  width: 100%;
  position: relative;
}

.parallax-window {
    min-height: 100vh;
    background: transparent;
    width: 100vw;
}

.break {
  height: 600px;
}




.text-overlay.show:after {
  position: absolute;
  color: white;
  font-size: 18px;
  font-weight: bold;
  font-family: 'Open Sans';
  padding: 10px;
  background-color: black;
  -webkit-animation: fadein 2s forwards;
  -moz-animation:    fadein 2s forwards;
  -o-animation:      fadein 2s forwards;
  animation:         fadein 2s forwards;
}

@-webkit-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}



.text-overlay_1 {
  margin-top: 0vh;
}

.text-overlay_1.show:after {
  width: 300px;
  top: 50vh;
  margin: 0vh calc(50vw - 150px) 0 calc(50vw - 150px);
  content: 'Text 1';
}

.text-overlay_2 {
  margin-top: 0vh;
}

.text-overlay_2.show:after {
  width: 300px;
  top: 50vh;
  margin: 0vh calc(50vw - 150px) 0 calc(50vw - 150px);
  content: 'Text 2';
}

.text-overlay_3 {
  margin-top: 0vh;
}

.text-overlay_3.show:after {
  width: 300px;
  top: 50vh;
  margin: 0vh calc(50vw - 150px) 0 calc(50vw - 150px);
  content: 'Text 3';
}

.text-overlay.show::after {
  position: fixed;
}

JavaScript

$(document).ready(function () {
    $(window).on('scroll', function () {
        var windowHeight = $(window).height(),
            gridTop = windowHeight * .0,
            gridBottom = windowHeight * 0.6;
        $('.text-overlay').each(function () {
            var thisTop = $(this).offset().top - $(window).scrollTop();

            if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) {
                $(this).addClass('show');
            } else {
                $(this).removeClass('show');
            }
        });
    });
    $(window).trigger('scroll');
});