You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
1.1 KiB
JavaScript
35 lines
1.1 KiB
JavaScript
3 years ago
|
const movers = document.querySelectorAll("[data-mover]");
|
||
|
|
|
||
|
|
Array.from(movers).forEach(mover=>{
|
||
|
|
mover.addEventListener('mouseenter', (e) => move(e))
|
||
|
|
})
|
||
|
|
|
||
|
|
function move(e) {
|
||
|
|
let amount = parseInt(e.target.dataset.mover) // data attribute mover set the amount of movement
|
||
|
|
|
||
|
|
let offsetCheck = /translate\(-50%, -50%\)/
|
||
|
|
let offsetMatch = e.target.style.transform.match(offsetCheck)
|
||
|
|
|
||
|
|
|
||
|
|
let transformCheck = /translate\((\d+\.*\d*)vw, (\d+\.*\d*)vh\)/ // check for pattern like translate(12vw, 34vh)
|
||
|
|
const match = e.target.style.transform.match(transformCheck)
|
||
|
|
|
||
|
|
if (match) {
|
||
|
|
e.target.style.transform =
|
||
|
|
`translate(
|
||
|
|
${parseInt(match[1]) + Math.random() * amount - amount / 2 }vw,
|
||
|
|
${parseInt(match[2]) + Math.random() * amount - amount / 2}vh)`
|
||
|
|
} else {
|
||
|
|
e.target.style.transform =
|
||
|
|
`translate(
|
||
|
|
${Math.random() * amount - amount / 2 }vw,
|
||
|
|
${Math.random() * amount - amount / 2}vh)`
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
if(offsetMatch){
|
||
|
|
e.target.style.transform += ' translate(-50%, -50%)'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|