<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Diff</title>
  <style>
    html, body {
      padding: 0;
      margin: 0;
      position: relative;
      font-family: monospace;
    }
    
    .section {
      height: 100vh;
    }
    
    .section--white {
      background-color: #fff;
    }
    
    .section--black {
      background-color: #000;
    }
    
    .section--red {
      background-color: #ba0c1a;
    }
    
    .section--green {
      background-color: #0cb70c;
    }
    
    .section img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    #plate {
      position: fixed;
      top: 40px;
      right: 0;
      left: 0;
      text-align: center;
      font-size: 18px;
      font-weight: 700;
      text-transform: uppercase;
      color: #fff;
      mix-blend-mode: difference;
    }
  </style>
</head>
<body>
  
  <div id="plate">
    <span>Scroll down</span>
  </div>

  <div class="section section--white">
    
  </div>
  
  <div class="section section--black">
    
  </div>
  
  <div class="section section--red">
    
  </div>
  
  <div class="section section--green">
    
  </div>
  
  <div class="section">
    <img src="http://nevseoboi.com.ua/uploads/posts/2011-09/1315763334_25_www.nevseoboi.com.ua.jpg" alt="">
  </div>
  
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.