JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div class="viewportMask"></div>
<div class="container">
<div class="parallax para_1">
<p class="tada testclass show">Real</p>
</div>	
    
<div class="parallax para_2">
</div>
</div>

SCSS

.what-we-do-cards {
  @include clearfix;
  border-top: 10px solid rgba(255, 255, 255, .46);
  color: $white;
  padding-bottom: 4em;
  overflow: hidden; // added for pseudo-element
  position: relative; // added for pseudo-element

  // Fixed-position background image
  &::before {
    content: ' ';
    position: fixed; // instead of background-attachment
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: white;
    background: url('/img/front/strategy.jpg') no-repeat center center;
    background-size: cover;
    will-change: transform; // creates a new paint layer
    z-index: -1;
  }
}

JavaScript

$(document).ready(function () {
        $(window).on('scroll', function () {
            var windowHeight = $(window).height(),
                gridTop = windowHeight * .2,
                gridBottom = windowHeight * .8;
            $('.tada').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');
    });