В мире веб-разработки крайне важно создавать интерактивный и привлекательный пользовательский интерфейс. Одним из мощных инструментов, который может помочь в этом, является GreenSock Animation Platform (GSAP). Сегодня мы исследуем увлекательный мир эффектов движения мыши с помощью GSAP, уделяя особое внимание созданию магнитных взаимодействий. Итак, пристегнитесь и приготовьтесь погрузиться в мир захватывающей анимации!

Метод 1: отслеживание положения мыши

Для начала нам нужно отслеживать положение мыши на экране. В JavaScript мы можем добиться этого, подключив прослушиватель событий к событию mousemove. Вот пример фрагмента:

document.addEventListener('mousemove', (event) => {
  const mouseX = event.clientX;
  const mouseY = event.clientY;

  // Use the mouse coordinates for further calculations or animations
});

Метод 2: привлечение элементов

Теперь, когда у нас есть доступ к положению мыши, давайте создадим ощущение, что элементы на странице притягиваются к курсору магнитом. Мы можем добиться этого, применив возможности анимации GSAP. Вот пример, который анимирует элемент в направлении позиции мыши:

const element = document.querySelector('.magnetic-element');
document.addEventListener('mousemove', (event) => {
  const mouseX = event.clientX;
  const mouseY = event.clientY;
  gsap.to(element, {
    x: mouseX,
    y: mouseY,
    duration: 0.5,
    ease: 'power2.out',
  });
});

Метод 3: добавление эффекта магнитного поля

Чтобы усилить магнитный эффект, мы можем создать магнитное поле вокруг курсора. Элементы внутри этого поля будут сильнее притягиваться к курсору. Вот пример, демонстрирующий этот эффект:

const magneticFieldStrength = 200; // Adjust this value to control the strength of the magnetic field
document.addEventListener('mousemove', (event) => {
  const mouseX = event.clientX;
  const mouseY = event.clientY;
  const deltaX = mouseX - element.offsetLeft - element.offsetWidth / 2;
  const deltaY = mouseY - element.offsetTop - element.offsetHeight / 2;
  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

  if (distance < magneticFieldStrength) {
    const magnetism = 1 - distance / magneticFieldStrength;
    gsap.to(element, {
      x: mouseX,
      y: mouseY,
      duration: 0.5,
      ease: 'power2.out',
      strength: magnetism,
    });
  }
});

Используя возможности GSAP и взаимодействие с движениями мыши, мы можем создавать захватывающие магнитные эффекты, повышающие интерактивность наших веб-приложений. Благодаря методам, продемонстрированным выше, у вас теперь есть прочная основа для реализации магнитных взаимодействий в ваших собственных проектах. Так что вперед, экспериментируйте и дайте волю своему творчеству!