Решил сделать такой эффект("живой" пример):
Цель: У меня есть три элемента и мне нужно, чтобы на каждом элементе срабатывало это событие(показанное выше). Пробовал в цикле, но всё тщетно.
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);
}
Ответ
Мышь - одна, опции - тоже одни на всех. Но размер и позиция у каждого свои.
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);
}
