JSFiddle - React, Tailwind, and code Playground
CSS
html,body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #e2e2e2;
}
#bg{
background:rgba(0,0,0,0.4);
height:100%;
}
JavaScript
var element = document.getElementById('bg');
element.addEventListener("touchmove", function (e) {
element.style.opacity = e.touches[0].clientX / document.body.offsetWidth;
});
element.addEventListener("mousemove", function (e) {
element.style.opacity = e.pageX / document.body.offsetWidth;
});