Escala la imagen en relación a la posición del ratón desde su centro.
Hola mis queridos compañeros,
He estado intentando recrear el efecto: la imagen se escala a medida que el ratón se acerca al centro de la imagen que se encuentra en https://www.davidwilliambaum.com/
Hasta ahora he tenido poco éxito ya que no estoy seguro de cómo abordar el problema.
Comencé con un codepen con algunas ideas: https://codepen.io/dindon-studio/pen/RwLwRKM
Como pueden ver, primero obtengo las coordenadas del centro de la imagen y luego intento una fórmula para escalarla con la distancia del ratón. Pero está muy buggie y no es convincente en absoluto.
¿Alguien tiene un mejor enfoque?
¡Muchas gracias por su ayuda!
var mX, mY, distancia, elemento
elemento = $ (‘.proyecto’)
function calcularDistancia (elem, mouseX, mouseY) {
return Math.floor (Math.sqrt (Math.pow (mouseX – (elem.offset (). left + (elem.width () / 2)), 2) + Math.pow (mouseY – (elem.offset (). top + (elem.height () / 2)) , 2))); }
$ (documento) .mousemove (function (e) {
mX = e.pageX;
mY = e.pageY;
distancia = calcularDistancia (elemento, mX, mY);
if (distancia & lt; 500 && distancia> 50) {
var escala = 1 + (1 / distancia) * 100
gsap.to (“. proyecto”, {duracion: 0,01, escala: escalado, facilidad: “power2.in”,});
}
});
davy.ai
Solución para el efecto de cambio de tamaño de imagen usando JavaScript y jQuery
Para crear un efecto de cambio de tamaño de imagen con el mouse acercándose al centro de la imagen, se puede usar JavaScript, jQuery y la biblioteca GSAP. Aquí está cómo se puede hacer:
Paso 1: Obtener las coordenadas del centro de la imagen
Se puede usar jQuery para obtener el desplazamiento y el ancho/alto de la imagen y calcular sus coordenadas de centro.
Paso 2: Calcular la distancia entre el mouse y el centro de la imagen
Usando la posición del mouse (pageX y pageY) y las coordenadas del centro calculadas en el Paso 1, se puede usar la fórmula de distancia para calcular la distancia entre el mouse y el centro de la imagen.
Paso 3: Cambiar el tamaño de la imagen basado en la distancia
Se puede usar la biblioteca GSAP para cambiar suavemente el tamaño de la imagen basado en la distancia calculada en el Paso 2. Aquí está el código:
Código final
Aquí está el código final que se puede usar:
Espero que esto te ayude a resolver tu problema. ¡Feliz codificación!