相对于鼠标位置从中心缩放图像

Question

大家好,

我一直在尝试重新创造这个效果：当鼠标靠近图片中心时，图片会放大，这个效果可以在https://www.davidwilliambaum.com/上找到。

到目前为止，我的尝试非常不成功，因为我不确定如何解决这个问题。

我已经在Codepen上开始了一些想法：https://codepen.io/dindon-studio/pen/RwLwRKM

正如你们所看到的，我首先获得了图像的中心坐标，然后尝试使用一些草率的公式将它与鼠标距离缩放。但是它非常有bug并且一点也不令人信服。

有没有更好的方法？非常感谢你们的帮助！

var mX, mY, distance, element
element = $('.project')

function calculateDistance(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))); }

$(document).mousemove(function(e) {  
mX = e.pageX;
mY = e.pageY;
distance = calculateDistance(element, mX, mY);
if (distance< 500 && distance >50){
   var scaling = 1 + (1/distance) *100

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

  }
 });

- Jean mi

---

一个问题是图像中心的位置一直在重新计算 - 虽然实际上它是固定的。在开始时计算它并使用这些值。这可以防止“抖动”。我没有放置代码片段，因为我不知道您想要的缩放因子是多少。 - A Haworth

确保使用 overwrite: true 或 "auto" 来终止之前的缓动效果。 - Zach Saucier

Answer 1

我在你的codepen基础上进行了一些调整：https://codepen.io/Mookiie/pen/qBPBmNe

scalingFactor越高，鼠标需要更接近才能改变大小。

function calculateCenter(image) {
  var rect1 = image.getBoundingClientRect();
  var x = rect1.left + rect1.width * 0.5;
  var y = rect1.top + rect1.height * 0.5;
  return { x: x, y: y }
}

function getDistance(x1, y1, x2, y2){
  let y = x2 - x1;
  let x = y2 - y1;

  return Math.sqrt(x * x + y * y);
}

function distanceFromCenter(image, mouseX, mouseY) {
  var imageCenter = calculateCenter(image);
  return getDistance(imageCenter.x, imageCenter.y, mouseX, mouseY)
}

function adjustImage(image, mX, mY) {
    var distance = distanceFromCenter(image, mX, mY);

    const baseScale = 1
    const maxScaling = 1.5;
    const scalingFactor = 1;
    
    const adjustedScaling = maxScaling - ((distance / 1000) * scalingFactor)
    const scaling = adjustedScaling >= baseScale ? adjustedScaling : baseScale
 
    gsap.to(image, {duration: 0.01, scale: scaling, ease: "power2.in",});
}


  $(document).mousemove(function(e) {  
    const mX = e.pageX;
    const mY = e.pageY;
    const images = $("img")
    
    images.each(function() {
      adjustImage(this, mX, mY)
    })
});

- Malcolm

---

该死！马尔科姆！非常感谢，const scaling = adjustedScaling >= baseScale ? adjustedScaling : baseScale 是个明智的选择。祝你有美好的一天！ - Jean mi