Событие на каждом элементе

#javascript #html #css

Решил сделать такой эффект("живой" пример):



Цель: У меня есть три элемента и мне нужно, чтобы на каждом элементе срабатывало
это событие(показанное выше). Пробовал в цикле, но всё тщетно.



var el = document.querySelector('.magnetic-button');

var options = {
  ease: 0.1,
  magneticForce: 0.6
};

var mouse = {
  x: 0,
  y: 0
};

var pos = {
  cx: 0,
  cy: 0,
  tx: 0,
  ty: 0,
  x: 0,
  y: 0
};

var sizes = el.getBoundingClientRect();

observe();
update();

function observe() {
  window.addEventListener('resize', resizeHandler, false);
  el.addEventListener('mousemove', mouseMoveHandler, false);
  el.addEventListener('mouseleave', mouseLeaveHandler, false);
}

function resizeHandler() {
  sizes = el.getBoundingClientRect();
}

function mouseMoveHandler(e) {
  //sizes

  mouse.x = e.pageX;
  mouse.y = e.pageY;

  // center

  pos.cx = sizes.left + sizes.width / 2;
  pos.cy = sizes.top + sizes.height / 2;

  // dist

  var distX = mouse.x - sizes.left - sizes.width / 2;
  var distY = mouse.y - sizes.top - sizes.height / 2;

  pos.tx = distX - distX * (1 - options.magneticForce);
  pos.ty = distY - distY * (1 - options.magneticForce);
}

function mouseLeaveHandler(e) {
  pos.tx = 0;
  pos.ty = 0;
}

function render() {

  pos.x += (pos.tx - pos.x) * options.ease;
  pos.y += (pos.ty - pos.y) * options.ease;

  var transform2 = 'translateX(' + pos.x + 'px) translateY(' + pos.y + 'px)';

  el.style.webkitTransform = transform2;
  el.style.MozTransform = transform2;
  el.style.msTransform = transform2;
  el.style.OTransform = transform2;
  el.style.transform = transform2;
}

function update() {
  render();
  window.requestAnimationFrame(update);
}
.social-nets {
  display: flex;
}

.magnetic-button {
  margin-left: 1rem;
  position: relative;
  width: 3.3333333333rem;
  height: 3.3333333333rem;
  background-color: #b3b3b3;
  color: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.magnetic-button::before,
.magnetic-button:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: transform 800ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  will-change: transform;
  z-index: -1;
}

.magnetic-button::before {
  background-color: red;
}

.magnetic-button:hover::before {
  transform: scale(0.95);
}

.magnetic-button:hover::after {
  transform: scale(0.85);
}

  

  

  





    

Ответы

Ответ 1

Мышь - одна, опции - тоже одни на всех. Но размер и позиция у каждого свои.



var options = {
  ease: 0.1,
  magneticForce: 0.6
};

var mouse = {
  x: 0,
  y: 0
};

observe();
update();

function observe() {
  window.addEventListener('resize', resizeHandler, false);

  var els = document.querySelectorAll('.magnetic-button');
  for(var i = 0; i < els.length; i++) {
    els[i].addEventListener('mousemove', mouseMoveHandler, false);
    els[i].addEventListener('mouseleave', mouseLeaveHandler, false);
    els[i].pos = {
      cx: 0,
      cy: 0,
      tx: 0,
      ty: 0,
      x: 0,
      y: 0
    };
    els[i].sizes = els[i].getBoundingClientRect();
  }
}

function resizeHandler() {
  var els = document.querySelectorAll('.magnetic-button');
  for(var i = 0; i < els.length; i++) {
    els[i].sizes = els[i].getBoundingClientRect();
  }
}

function mouseMoveHandler(e) {
  //sizes

  mouse.x = e.pageX;
  mouse.y = e.pageY;

  // center

  this.pos.cx = this.sizes.left + this.sizes.width / 2;
  this.pos.cy = this.sizes.top + this.sizes.height / 2;

  // dist

  var distX = mouse.x - this.sizes.left - this.sizes.width / 2;
  var distY = mouse.y - this.sizes.top - this.sizes.height / 2;

  this.pos.tx = distX - distX * (1 - options.magneticForce);
  this.pos.ty = distY - distY * (1 - options.magneticForce);
}

function mouseLeaveHandler(e) {
  this.pos.tx = 0;
  this.pos.ty = 0;
}

function render(el) {
  el.pos.x += (el.pos.tx - el.pos.x) * options.ease;
  el.pos.y += (el.pos.ty - el.pos.y) * options.ease;

  var transform2 = 'translateX(' + el.pos.x + 'px) translateY(' + el.pos.y + 'px)';

  el.style.webkitTransform = transform2;
  el.style.MozTransform = transform2;
  el.style.msTransform = transform2;
  el.style.OTransform = transform2;
  el.style.transform = transform2;
}

function update() {
  var els = document.querySelectorAll('.magnetic-button');
  for(var i = 0; i < els.length; i++) {
    render(els[i]);
  }
  window.requestAnimationFrame(update);
}
.social-nets {
  display: flex;
}

.magnetic-button {
  margin-left: 1rem;
  position: relative;
  width: 3.3333333333rem;
  height: 3.3333333333rem;
  background-color: #b3b3b3;
  color: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.magnetic-button::before,
.magnetic-button:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: transform 800ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  will-change: transform;
  z-index: -1;
}

.magnetic-button::before {
  background-color: red;
}

.magnetic-button:hover::before {
  transform: scale(0.95);
}

.magnetic-button:hover::after {
  transform: scale(0.85);
}