JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<div class="left">
    <h1>Hallo Michel</h1>
</div>
<div class="right">
    <h1>Hallo Michel</h1>
</div>

CSS

div.left, div.right {
    position: relative;
    height: 15000px;
    background: url(http://tutorials.pixelmator.com/mosaic/Pattern.jpg) right top;
    width: 50%;
    overflow: hidden;
}

div.right {
    position: fixed;
    right: 0; top: 0;    
    background-position: left top;
}

h1 {
    font-size: 70px;
    color: #fff;
    position: absolute;
    
}

div.left h1 {
    top: 1000px;
    right: -50%;
}

div.right h1 {
    bottom: 1000px;
    left: -50%;
}

JavaScript

var $div = $("div.right");

$(window).on("scroll", function(){
    $div.css("top", -0.5 * $("body").scrollTop() + "px")
})