JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<section class="Layer">
    <div class="Layer-bg--solid"></div>
    <div class="Layer-wrap">
        <div class="Layer-content">
            <h3 class="Layer-heading">Dark slate blue background.</h3>
            <p class="Layer-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque cum, reiciendis, quos beatae nesciunt laudantium.</p>
            <a href="" class="Layer-button">Lorem ipsum dolor.</a>
        </div>
    </div>
</section>
<section class="Layer--alt">
    <img src="https://placeimg.com/1200/960/arch/grayscale" alt="" class="Layer-bg">
    <div class="Layer-wrap">
        <div class="Layer-content">
            <h3 class="Layer-heading">A doorway that looks fairly impressive.</h3>
            <p class="Layer-description">Obcaecati deserunt, vero tempora qui quasi aperiam, quia repellendus magnam necessitatibus iusto accusamus consectetur ipsam.</p>
            <a href="" class="Layer-button">Sint, ipsa, corporis!</a>
        </div>
    </div>
</section>
<section class="Layer">
    <img src="https://placeimg.com/1200/960/arch/grayscale?4" alt="" class="Layer-bg">
    <div class="Layer-wrap">
        <div class="Layer-content">
            <h3 class="Layer-heading">New York City has busy streets!</h3>
            <p class="Layer-description">Molestiae excepturi eveniet, quos cupiditate quis optio, ab id saepe eum distinctio minima sapiente, et.</p>
            <a href="" class="Layer-button">Similique, fugiat, quos.</a>
        </div>
    </div>
</section>
<section class="Layer--alt">
    <img src="https://placeimg.com/1200/960/arch/grayscale?2" alt="" class="Layer-bg">
    <div class="Layer-wrap">
        <div class="Layer-content">
            <h3 class="Layer-heading">This street is a lot less busy.</h3>
            <p class="Layer-description">Ex odio deleniti architecto optio reiciendis, neque fugit deserunt earum minus. Assumenda provident veniam voluptate.</p>
            <a href="" class="Layer-button">Repudiandae,...

SCSS

html, body {
    background: darkslateblue;
}

.Layer {
    position: relative;
    min-height: 20rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    
    &-bg {
        position: absolute;
        left: 0;
        right: 0;
        top: -320px;
        bottom: -320px;
        transition: opacity 400ms;
        opacity: 0;
    }
    
    &-bg--solid {
        @extend .Layer-bg;
        background-color: darkslateblue;
    }
    
    &--centered {
        .Layer-bg {
            opacity: 1;
        }
    }

    &-wrap {
        color: white;
        height: 320px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        z-index: 1;
        position: relative;
    }
            
    &--alt {
        @extend .Layer;
        
        .Layer-wrap {
            flex-flow: row-reverse;
        }
    }
    
    &-content {
        padding: 3rem;
        max-width: 35%;
    }
    
    &-button {
        background: white;
        padding: .5rem 1rem;
        display: inline-block;
        border-radius: .25rem;
        text-decoration: none;
        font-weight: bold;
    }
}

JavaScript

$(function() {
	let layers = $('.Layer, .Layer--alt');
	let updateLayers = function() {
    	let scrollTop = $(window).scrollTop() - 160;
		for (let i = 0; i < layers.length; i++) {
        	if (layers.eq(i).offset().top > scrollTop) {
            	layers.eq(i).addClass('Layer--centered');
                layers.eq(i).siblings('.Layer--centered').removeClass('Layer--centered');
                return;
            }
        }
    };
    
    $(window).scroll(updateLayers);
    updateLayers();
});