es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Escala la imagen en relación a la posición del ratón desde su centro.

11 Jun, 2023 Programación

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”,});

}
});

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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.

    var element = $(".proyecto"); // seleccionar el elemento de la imagen
var centerX = element.offset().left + (element.width() / 2); // calcular la coordenada X del centro
var centerY = element.offset().top + (element.height() / 2); // calcular la coordenada Y del 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.

    var distance = Math.floor(Math.sqrt(Math.pow(mX - centerX, 2) + Math.pow(mY - centerY, 2)));

    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:

    if (distance < 500 && distance > 50) {
  var scaling = 1 + (1 / distance) * 100; // calcular el factor de escalado basado en la distancia

  gsap.to(".proyecto", { duration: 0.01, scale: scaling, ease: "power2.in" }); // anima el escalado
}

    Código final

    Aquí está el código final que se puede usar:

    var element = $(".proyecto");

function calculateDistance(centerX, centerY, mouseX, mouseY) {
  return Math.floor(Math.sqrt(Math.pow(mouseX - centerX, 2) + Math.pow(mouseY - centerY, 2)));
}

$(document).mousemove(function(e) {
  var mX = e.pageX;
  var mY = e.pageY;
  var centerX = element.offset().left + (element.width() / 2);
  var centerY = element.offset().top + (element.height() / 2);
  var distance = calculateDistance(centerX, centerY, mX, mY);

  if (distance < 500 && distance > 50) {
    var scaling = 1 + (1 / distance) * 100;

    gsap.to(".proyecto", { duration: 0.01, scale: scaling, ease: "power2.in" });
  }
});

    Espero que esto te ayude a resolver tu problema. ¡Feliz codificación!

Comments are closed.