init
This commit is contained in:
commit
6fc0f180e6
|
@ -0,0 +1 @@
|
|||
.idea
|
|
@ -0,0 +1,69 @@
|
|||
<!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>
|
Binary file not shown.
After Width: | Height: | Size: 6.0 KiB |
Loading…
Reference in New Issue