JSFiddle - React, Tailwind, and code Playground

by konzule

HTML

<section id="slide-1" class="image-slides">
    <div class="red-cube first-cube">
      <div class="red-multiply"></div>
      <div class="red-cube-inner">
        <h2>Lorem Ipsum</h2>
        <p><strong><br />Test Headline</strong></p>
        <a href="#">Details</a>
      </div>
    </div>
  </section>
  <section id="slide-2">
    <div class="container">
      <div class="snow inview"></div>

      <div class="row">
        <h3 class="special-headline">Test Headline</h3>
        <div class="col-lg-8 fullservice-container">
          <div class="col">
            <h3>Test</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidbore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          </div>
          
        </div>
      </div>

      <!-- /.row -->
    </div>
  </section>

CSS

body {
  color: #494949;
  background-color: #fff;
  padding-top: 50px;
  font-size: 16px;
}

h4 {
  color: #ce111e;
  font-size: 22px;
}

header {
  height: 115px;
  background-color: #fff;
  background-color: transparent;
  border: 0px;
}

.float-left {
  float: left;
}

.spacer {
  margin-top: 50px;
  margin-bottom: 50px;
}

.image-slides {
  background-attachment: fixed;
  background-position: 50% 115px;
  background-repeat: no-repeat;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  width: 100%;
  min-width: 700px;
  margin-top: 65px;
}

#slide-1 {
  height: 650px;
  background-color: #898a8e;
}

#slide-1 .red-cube {
  float: right;
}

.red-multiply {
  background-color: #ce111e;
  mix-blend-mode: multiply;
  position: absolute;
  height: 400px;
  width: 100%;
}

.red-cube {
  width: 50%;
  height: 400px;
  max-width: 500px;
  background-blend-mode: multiply;
  position: relative;
  right: 20%;
  top: 24%;
  color: #fff;
  text-transform: uppercase;
}

.red-cube-inner {
  position: relative;
  padding: 9%;
}

.red-cube h2 {
  font-size: 67px;
  border: 7px solid #fff;
  display: inline;
  padding: 0px 14px;
}

.red-cube p {
  padding-top: 20px;
  font-size: 30px;
  margin-top: 5px;
  margin-bottom: 20px;
}

.red-cube a {
  color: #fff;
  font-size: 18px;
  border: 3px solid #fff;
  padding: 8px 11px;
  text-transform: uppercase;
}

.red-cube a:hover {
  color: #ce111e;
  background-color: #fff;
  border: 3px solid #fff;
  text-decoration: none;
}

JavaScript

$(document).ready(function() {

  //	Red Cubes
  var firstCube = $(".first-cube");

  //	Window Height
  var $window = $(window);
  var windowHeight = $window.height();


  function redPosition(windowHeight, pos, scrollPoint, speed) {
    return (((windowHeight + pos) - scrollPoint) * speed) + "px";
  }

  function init() {
    //Current Scroll Position
    var pos = $window.scrollTop();

    // Change Red Cubes Positions
    firstCube.css({
      "top": redPosition(windowHeight, pos, 600, 0.8)
    }, "fast");

  }

  //Initialize
  $window.scroll(function() { //when the user is scrolling...
    init();
  });

  $window.resize(function() { //if the user resizes the window...
    init();
  });

});