elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Trabajando con las ramas de git (tercera parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Efecto deslizamiento que sigue al cursor. JS
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Efecto deslizamiento que sigue al cursor. JS  (Leído 4,986 veces)
Nvyx24

Desconectado Desconectado

Mensajes: 5


Ver Perfil
Efecto deslizamiento que sigue al cursor. JS
« en: 10 Mayo 2017, 20:44 pm »

Hola a todos. Primero de todo decir que estoy empezando con JS en desarrollo web.

Estoy haciendo un script donde una imagen sigue la posición del cursor.
Código
  1. function sigueCursor (){
  2. corX = window.event.clientX;
  3. corY = window.event.clientY;
  4. img.style.left = corX+"px";
  5. img.style.top = corY+"px";
  6. }
Aplicando esta función al evento onmousemove de la etiqueta html del código HTML.

Pero me gustaria que esta imagen siguiera la posición del cursor con dicho retraso, creando así una especie de efecto "aura" o "deslizamiento" (no se si me explico como es debido...).
He intentado crear este efecto de mil maneras diferentes, pero por lo que veo no entiendo muy bien como funcionan los eventos...
Si aplico la función setTimeout, el retraso solo me lo hace al principio del movimiento estando el cursor previamente parado, si el cursor sigue en movimiento la imagen también lo hace. He probado también guardando las coordenadas en un array, pero solamente me guarda el primer valor de la posición (tanto en x como en y) y se ejecuta de la misma forma que con variables normales.

¿Alguien me podria dar una idea de como conseguirlo?

¡Muchas gracias por la ayuda y por vuestro tiempo!



En línea

ThinkByYourself

Desconectado Desconectado

Mensajes: 191


Ver Perfil
Re: Efecto deslizamiento que sigue al cursor. JS
« Respuesta #1 en: 10 Mayo 2017, 22:38 pm »

Ah pues ahora si puedes utilizar las transitions para hacerlo te podrías ahorrar algunos cálculos creo.

https://www.w3schools.com/css/css3_transitions.asp

Por aportar algo


« Última modificación: 10 Mayo 2017, 22:40 pm por NoBullshit » En línea

No te voy a engañar.
Todos hemos sido programados para normalizar la psicopatía de las élites económicas y políticas, y para realimentar su patrón de ciega codicia.
Nvyx24

Desconectado Desconectado

Mensajes: 5


Ver Perfil
Re: Efecto deslizamiento que sigue al cursor. JS
« Respuesta #2 en: 16 Mayo 2017, 20:18 pm »

Muchas gracias, la verdad que mi idea era intentarlo hacer solamente mediante javascript, pero con esto he conseguido hacer algo parecido a lo que buscaba.

Muchísimas gracias por tu tiempo, dejo el código por si a alguien le pueda interesar.

Código
  1. <!doctype html>
  2. <html onmousemove="sigueCursor()">
  3. <meta charset="utf-8">
  4. <title>Sigue Cursor</title>
  5. <style type="text/css">
  6. #img{
  7. position: absolute;
  8. transition: all 0.5s ease-in-out 0.2s;
  9. }
  10. </style>
  11. <script type="text/javascript">
  12. function sigueCursor(){
  13. corX = window.event.clientX;
  14. corY = window.event.clientY;
  15. img.style.left = corX+"px";
  16. img.style.top = corY+"px";
  17. }
  18. </script>
  19. </head>
  20.  
  21. <img src="imagen.png" id="img" />
  22. </body>
  23.  
  24. </html>
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Cursor XP
Diseño Gráfico
Free-Knowledgend 0 2,014 Último mensaje 20 Enero 2005, 19:54 pm
por Free-Knowledgend
Cursor
Programación Visual Basic
yeikos 6 2,625 Último mensaje 29 Agosto 2006, 03:45 am
por Red Mx
Cursor??? « 1 2 »
Programación Visual Basic
hepy_92 12 4,404 Último mensaje 27 Mayo 2007, 20:47 pm
por hepy_92
Mostrar y ocultar div con deslizamiento « 1 2 »
Desarrollo Web
Poizonus 10 9,824 Último mensaje 21 Julio 2011, 16:47 pm
por Poizonus
El "efecto Streisand" ha muerto. Explota el "efecto Carrero Blanco"
Noticias
wolfbcn 0 3,705 Último mensaje 12 Enero 2017, 19:05 pm
por wolfbcn
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines