JSFiddle - React, Tailwind, and code Playground

by vvv vvvv

HTML

<header>
     <h1>Something fabulous to write</h1>

    <p>The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts?</p>
    <p>The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts?</p>
    <p>The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts?</p>
</header>

CSS

body {
    background-color: #EDF8F2;
}
header {
    padding: 80px;
    padding-right: 50%;
    background: url(http://blog.spoongraphics.co.uk/wp-content/uploads/2012/retro-pattern/triangle-pattern.jpg) pink repeat 0 0;
    font-family: Helvetica;
    color: white;
}
h1 {
    text-shadow: 0 0 7px #000;
}
p {
    color: blue;
    background-color: white;
}

JavaScript

var movementStrength = 150,
    bgPos,
    bgPosTbl,
    oppositeMov = true;

var movementPointY = movementStrength / $(window).height();
var movementPointX = movementStrength / $(window).width();

if (oppositeMov) oppositeMov = 1;
else oppositeMov = -1;


bgPos = $('header').css("background-position");
bgPosTbl = bgPos.split(" ");
bgPosTbl.forEach(function (val, index, array) {
    array[index] = -movementStrength;
});

function putain(e) {

    var pageX = e.pageX - ($(window).width() / 2);
    var pageY = e.pageY - ($(window).height() / 2);

    var newvalueX = bgPosTbl[0] - (movementPointX * pageX * oppositeMov);
    var newvalueY = bgPosTbl[1] - (movementPointY * pageY * oppositeMov);



    $('header').css("background-position", newvalueX + "px " + newvalueY + "px");

}


$("header").mousemove(putain);