JSFiddle - React, Tailwind, and code Playground

by Stefan Zamfira

HTML

<div class="image-wrapper">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>  
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.image-wrapper {
  position: relative;
  height: 100vh;
  width: 50vw;
}

.image {
  height: 100%;
  width: 400px;
  
  &:nth-child(1) { background: red; }
  &:nth-child(2) { background: blue; }
  &:nth-child(3) { background: green; }
}

span {
  height: 100vh;
  background: blue;
  display: block;
  width: 100vw;
}

body {
}

JavaScript

$(document).ready(function(){
    $(window).scroll(function(){
        $("#hero-image").css("opacity", 1 - $(window).scrollTop() / ($(window).height() + 200));
    });
});