I'm trying to imitate this project in jsfiddle and how do I do this hover effect inside my React project without using jquery. Here's my current script tag : <script src="/umi.js"></script> in index.html. Is there any way to implement this effect without having to include <script>?
Here's my css code:
.bigTitle{
font-weight: 800;
color: transparent;
font-size:120px;
background: url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat;
background-position: 40% 50%;
-webkit-background-clip: text;
position:relative;
text-align:center;
line-height:90px;
letter-spacing: -8px;
}
I would want the image inside the text to react according to my mouse position.
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const mouseMove = (e) => {
let mouseX, mouseY;
let traX, traY;
mouseX = e.pageX;
mouseY = e.pageY;
traX = ((4 * mouseX) / 570) + 40;
traY = ((4 * mouseY) / 570) + 50;
document.getElementById('bigTitle').style.backgroundPosition = traX + "%" + traY + "%";
}#bigTitle{
font-weight: 800;
color: transparent;
font-size:120px;
background: url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat;
background-position: 40% 50%;
-webkit-background-clip: text;
position:relative;
text-align:center;
line-height:90px;
letter-spacing: -8px;
}<div id="bigTitle" onmousemove="mouseMove(event)">It works?</div>This should do it, I just translated whatever it was in the example you provided in javascript.