Estoy tratando de imitar este proyecto en jsfiddle y ¿cómo hago este efecto de desplazamiento dentro de mi React project
sin usar jquery
? Aquí está mi script tag : <script src="/umi.js"></script>
en index.html
. ¿Hay alguna forma de implementar este efecto sin tener que incluir <script>
? Aquí está mi código css:
.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; }
Me gustaría que la imagen dentro del texto reaccionara de acuerdo con la posición de mi mouse .
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>
Esto debería hacerlo, solo traduje lo que fuera en el ejemplo que proporcionó en javascript.