70 lines
2.6 KiB
HTML
70 lines
2.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Document</title>
|
|
</head>
|
|
<body style="width: 100%; padding-top: 50px; display: flex; align-items: center; justify-content: center;">
|
|
<div style="position: relative">
|
|
<img id="wheel" src="wheel.png"/>
|
|
<img src="marker.png" style="position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%)">
|
|
<button id="start"
|
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 45px;">Start
|
|
</button>
|
|
</div>
|
|
<script>
|
|
const appendBlurAnimation = (animationDuration) => {
|
|
const style = document.createElement('style')
|
|
style.innerHTML = `
|
|
.blur {
|
|
animation: blur ${animationDuration}s;
|
|
}
|
|
|
|
@keyframes blur {
|
|
0% {
|
|
filter: blur(1px);
|
|
}
|
|
80% {
|
|
filter: blur(1px);
|
|
}
|
|
100% {
|
|
filter: blur(0px);
|
|
}
|
|
}
|
|
`
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
const ANIMATION_DURATION_IN_SECONDS = 6;
|
|
const ROTATION_MIN_DEG = 1000;
|
|
const ROTATION_MAX_DEG = 2500;
|
|
|
|
appendBlurAnimation(ANIMATION_DURATION_IN_SECONDS);
|
|
|
|
const wheel = document.querySelector('#wheel');
|
|
const startButton = document.querySelector('#start');
|
|
let deg = 0;
|
|
|
|
startButton.addEventListener('click', () => {
|
|
startButton.disabled = true;
|
|
deg = Math.floor(ROTATION_MIN_DEG + Math.random() * (ROTATION_MAX_DEG - ROTATION_MIN_DEG));
|
|
wheel.style.transition = `transform ${ANIMATION_DURATION_IN_SECONDS}s ease-out`;
|
|
wheel.style.transform = `rotate(${deg}deg)`;
|
|
wheel.classList.add('blur');
|
|
});
|
|
|
|
wheel.addEventListener('transitionend', () => {
|
|
wheel.classList.remove('blur');
|
|
startButton.disabled = false;
|
|
wheel.style.transition = 'none';
|
|
wheel.style.transform = `rotate(${deg % 360}deg)`;
|
|
});
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|