You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
34 lines
967 B
34 lines
967 B
const container = document.querySelector('.particles');
|
|
const containerBounds = container.getBoundingClientRect();
|
|
|
|
const DOM = {
|
|
container,
|
|
containerBounds,
|
|
|
|
getEventOffsetCoords: (evt, containerCoords) => {
|
|
const { pageX, pageY } = evt;
|
|
|
|
return {
|
|
evtX: (pageX - containerCoords.left),
|
|
evtY: (pageY - containerCoords.top)
|
|
};
|
|
},
|
|
|
|
highlight: (evt) => {
|
|
const { evtX, evtY } = DOM.getEventOffsetCoords(evt, DOM.containerBounds);
|
|
|
|
const highlightDiv = document.createElement('div');
|
|
highlightDiv.className = 'highlight';
|
|
highlightDiv.style.left = `${evtX}px`;
|
|
highlightDiv.style.top = `${evtY}px`;
|
|
|
|
DOM.container.appendChild(highlightDiv);
|
|
setTimeout(() => { DOM.container.removeChild(highlightDiv); }, 500);
|
|
},
|
|
|
|
// calcBounds: () => {
|
|
// DOM.containerBounds = container.getBoundingClientRect();
|
|
// },
|
|
};
|
|
|
|
export default DOM;
|
|
|