JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="word">
  <div id="up">
    <h2>LK</h2>
  </div>
  <div id="down">
    <h2>LK</h2>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Raleway:200,400,700');
body {
  margin: 0;
  overflow-x: hidden;
}
* {
  box-sizing: border-box;
  font-family: 'Raleway', sans-serif;
}
div#word {
  width: 100vw;
  height: 100vh;
  position: relative;
}
div#up {
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  background: black;
  color: white;
  overflow: hidden;
  text-align: center;
}
div#up h2 {
  position: absolute;
  font-size: 220px;
  margin: 0;
  top: calc(100% - 129px);
  left: 50%;
  font-weight: 700;
  color: white;
  /* transition: .1s ease-out; */
  margin-left: -133px;
}
div#down {
  width: 100%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  background: black;
  color: white;
  overflow: hidden;
  text-align: center;
}
div#down h2 {
  position: absolute;
  font-size: 220px;
  margin: 0;
  bottom: calc(100% - 129px);
  left: 50%;
  font-weight: 700;
  color: white;
  /* transition: .1s ease-out; */
  margin-left: -133px;
}

JavaScript

var a = document.querySelector('#word');

a.addEventListener('mousemove',function(e){
	/* console.log(e.pageX,e.pageY,window.innerWidth) */
  var b = document.querySelector('#up h2');
  var c = document.querySelector('#down h2');
  setTimeout(function(){
    b.style.transform = 'translateX(-' + ( Math.floor(window.innerWidth / e.pageX * 10 - 10)) + 'px)';
    c.style.transform = 'translateX(' + ( Math.floor(window.innerWidth / e.pageX * 10 - 10) ) + 'px)';
  })
})