Created
January 14, 2024 15:21
-
-
Save Heinrich-XIAO/54d54abae74ff756f71241842d8274ea to your computer and use it in GitHub Desktop.
Unsubscribe to our newsletter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<style> | |
body { | |
margin: 0; | |
overflow: hidden; | |
} | |
#moveButton { | |
position: absolute; | |
width: 100px; | |
height: 40px; | |
background-color: #3498db; | |
color: #fff; | |
border: none; | |
cursor: pointer; | |
} | |
</style> | |
<title>Unsubscribe</title> | |
</head> | |
<body> | |
<h1>Click Unsubscribe to Unsubscribe from our newsletter.</h1> | |
<button id="moveButton">Unsubscribe</button> | |
<script> | |
const button = document.getElementById('moveButton'); | |
button.style.left = 500 + 'px'; | |
button.style.top = 500 + 'px'; | |
document.addEventListener('mousemove', (event) => { | |
moveButton(event); | |
}); | |
function moveButton(event) { | |
const buttonRect = button.getBoundingClientRect(); | |
const mouseX = event.clientX; | |
const mouseY = event.clientY; | |
const buttonCenterX = buttonRect.left + buttonRect.width / 2; | |
const buttonCenterY = buttonRect.top + buttonRect.height / 2; | |
const deltaX = mouseX - buttonCenterX; | |
const deltaY = mouseY - buttonCenterY; | |
const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2); | |
if (distance < 100) { // Adjust the value for the proximity threshold | |
const angle = Math.atan2(deltaY, deltaX); | |
const newX = buttonCenterX - 100 * Math.cos(angle); | |
const newY = buttonCenterY - 100 * Math.sin(angle); | |
button.style.left = newX + 'px'; | |
button.style.top = newY + 'px'; | |
} | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment