Animação Roleta de Prêmios:
Descubra como criar uma animada roleta de prêmios com este tutorial detalhado.
Este projeto consiste em uma Animação, uma roleta de Prêmios virtuais.
Onde podemos clicar no play e quando pausar vai aparecer uma mensagem do prêmio.
A roleta tem uma seta que indica em qual prêmio parou.
Este projeto é muito bom pra quem está aprendendo linguagens de programação, as linguagens usadas neste projeto foram... HTML, CSS e JavaScript.
Veja a Animação de Roleta de Prêmios em funcionamento neste link. Roleta de Prêmios.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js.
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animação de Roleta de Prêmios</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="folha">
<div class="seta"></div>
<div class="roleta" id="roleta">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="premio premio1" id="opt1">100 reais</div>
<div class="premio premio2" id="opt0">110 reais</div>
<div class="premio premio3" id="opt7">115 reais</div>
<div class="premio premio4" id="opt6">120 reais</div>
<div class="premio premio5" id="opt5">125 reais</div>
<div class="premio premio6" id="opt4">130 reais</div>
<div class="premio premio7" id="opt3">140 reais</div>
<div class="premio premio8" id="opt2">150 reais</div>
<div id="btnPlay" class="btnRoleta play" onclick="playOnClick()">►</div>
<div id="btnStop" class="btnRoleta stop" onclick="stopOnClick()">❚❚</div>
</div>
</div>
<p id="msgGanhador"></p>
<script src="script.js"></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
.folha {
position: relative;
background-color: #cdcdcd;
width: 600px;
height: 600px;
padding: 50px;
}
.roleta {
border: 10px solid #FFF;
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
/* animation: roleta 5s linear infinite;*/
}
path {
fill: transparent;
}
.seta {
position: absolute;
left: 48.5%;
border-bottom: 0px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 40px solid #33c9dc;
width: 0;
height: 0;
z-index: 999;
animation: animacaoSeta .35s linear infinite;
}
.box1,
.box2,
.box3,
.box4,
.box5,
.box6,
.box7,
.box8 {
position: absolute;
width: 0;
height: 0;
}
.box1 {
border-top: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 150px solid #f6685e;
border-left: 150px solid #f6685e;
}
.box5 {
border-top: 150px solid #e91e63;
border-right: 150px solid #e91e63;
border-bottom: 150px solid transparent;
border-left: 150px solid transparent;
}
.box2 {
border-top: 150px solid #9c27b0;
border-right: 150px solid transparent;
border-bottom: 150px solid transparent;
border-left: 150px solid #9c27b0;
left: 50%;
}
.box6 {
border-top: 150px solid transparent;
border-right: 150px solid #673ab7;
border-bottom: 150px solid #673ab7;
border-left: 150px solid transparent;
left: 50%
}
.box4 {
border-top: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 150px solid #2196f3;
border-left: 150px solid #2196f3;
top: 50%;
left: 50%;
}
.box8 {
border-top: 150px solid #34399d;
border-right: 150px solid #34399d;
border-bottom: 150px solid transparent;
border-left: 150px solid transparent;
top: 50%;
left: 50%;
}
.box3 {
border-top: 150px solid #009688;
border-right: 150px solid transparent;
border-bottom: 150px solid transparent;
border-left: 150px solid #009688;
top: 50%;
}
.box7 {
border-top: 150px solid transparent;
border-right: 150px solid #ffeb3b;
border-bottom: 150px solid #ffeb3b;
border-left: 150px solid transparent;
top: 50%;
}
@keyframes roleta {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
@keyframes animacaoSeta {
0% { transform: rotate(0deg)}
25% { transform: rotate(-15deg)}
75% { transform: rotate(15deg)}
100% { transform: rotate(0deg)}
}
.premio {
position: absolute;
z-index: 999;
font-size: 27px;
font-weight: bold;
color: white;
}
.premio1 {
top: 35%;
left: 8%;
transform: rotate(25deg);
}
.premio2 {
top: 15%;
left: 30%;
transform: rotate(55deg);
}
.premio3 {
top: 15%;
left: 55%;
transform: rotate(115deg);
}
.premio4 {
top: 33%;
right: 10%;
transform: rotate(150deg);
}
.premio5 {
top: 60%;
right: 10%;
transform: rotate(200deg);
}
.premio6 {
top: 80%;
right: 30%;
transform: rotate(250deg);
}
.premio7 {
top: 80%;
left: 30%;
transform: rotate(306deg);
}
.premio8 {
top: 60%;
left: 10%;
transform: rotate(333deg);
}
.btnRoleta {
position: absolute;
color: white;
background-color: #000;
border: 15px solid #000;
cursor: pointer;
top:45%;
left: 45%;
font-size: 35px;
border-radius: 50%;
height: 42px;
width: 42px;
text-align: center;
}
.play {
z-index: 999;
}
.stop {
/* visibility: hidden;*/
animation-play-state: paused;
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
let globalObjects;
function playOnClick() {
globalObjects = {
btnPlay: document.getElementById("btnPlay"),
roleta: document.getElementById("roleta"),
btnStop: document.getElementById("btnStop"),
};
globalObjects.timeInitial = new Date();
globalObjects.btnPlay.style.visibility = "hidden";
globalObjects.btnStop.style.visibility = "visible";
const randomRotation = Math.floor(Math.random() * 3600) + 360; // Rotação aleatória entre 360 e 3960 graus
globalObjects.roleta.style.transition = "transform 4s ease-out"; // Transição suave
globalObjects.roleta.style.transform = `rotate(${randomRotation}deg)`;
}
function stopOnClick() {
globalObjects.btnStop.style.visibility = "hidden";
// Extrair o valor da rotação final da roleta
const transformValue = globalObjects.roleta.style.transform;
const rotationDegrees = parseInt(transformValue.replace(/[^0-9]/g, '')) % 360;
// Calcular qual seção foi selecionada
const sections = 8; // Número de seções
const sectionDegree = 360 / sections;
const winningSection = Math.floor(rotationDegrees / sectionDegree);
const boxGanhador = document.getElementById("opt".concat(winningSection));
document.getElementById("msgGanhador").innerHTML = "Parabéns! Você ganhou ".concat(boxGanhador.innerHTML);
// Mostrar o botão de play novamente
globalObjects.btnPlay.style.visibility = "visible";
}
Agora, com os três arquivos (index.html, style.css, e script.js) criados, você pode abrir o index.html no seu navegador e ver seu projeto funcionando perfeitamente!
Resultado vai ser igual o da imagem abaixo:
As postagens do nosso blog te ajudaram?
Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
60% das doações são no valor de R$ 7,00
Antônio José do Carmo Nascimento
Comentários
Postar um comentário
Obrigado pelo seu feedback!