• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

127
Vistas
Mueva la imagen dentro del texto div usando el desplazamiento

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 .

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

 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.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda