Kichiyaki
/
lottery-wheel-animation-poc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

This commit is contained in:
Dawid Wysokiński 2023-05-22 07:21:51 +02:00
commit 6fc0f180e6
Signed by: Kichiyaki
GPG Key ID: B5445E357FB8B892
4 changed files with 70 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.idea

69
index.html Normal file
View File

@ -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>

BIN
marker.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
wheel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 607 KiB