Страницы

Поиск по вопросам

вторник, 13 ноября 2018 г.

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

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

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


Комментариев нет:

Отправить комментарий