Animação Disco Voador:
Descubra como criar uma animação de disco voador interativa com este tutorial abrangente.
Este projeto consiste numa animação de um disco voador.
Projeto esse muito interessante, ainda mais para quem está aprendendo programação.
Este projeto, representa um disco Voador se movimentando e fazendo um barulho representado pelo som ufo-sound.
O script.js tenta reproduzir o som automaticamente, mas se o navegador bloquear o som automático é só passar o mouse sobre o disco Voador que o som é reproduzido.
No fundo atrás do disco Voador tem um céu estrelado com as estrelas se movimentando em loop infinito.
Por fim este projeto usa as três linguagens: HTML, CSS e JavaScript.
Veja a Animação de Disco Voador em funcionamento neste link. Animação de Disco Voador.
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 Disco Voador</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="stars"></div>
<div id="stars2"></div>
<div id="ufo-container">
<div id="ufo">
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(0, #120c56, #000000);
overflow: hidden;
font-family: Arial, sans-serif;
}
#stars, #stars2 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.star, .star2 {
position: absolute;
border-radius: 50%;
background: white;
}
.star {
width: 2px;
height: 2px;
animation: anim-stars 10s linear infinite;
}
.star2 {
width: 1px;
height: 1px;
animation: anim-stars 15s linear infinite;
}
@keyframes anim-stars {
from {
transform: translateY(0px);
}
to {
transform: translateY(-1000px);
}
}
#ufo-container {
position: relative;
width: 100%;
height: 100%;
}
#ufo {
position: absolute;
top: 30%;
left: 0;
transform: translateX(-50%);
width: 10vw;
max-width: 100px;
height: 5vw;
max-height: 50px;
background: linear-gradient(to bottom, #c0c0c0, #808080);
border-radius: 50% 50% 0 0;
transform-origin: 50% 50%;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
}
#ufo::before {
content: '';
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
width: 6vw;
max-width: 60px;
height: 3vw;
max-height: 30px;
background: linear-gradient(to bottom, #e0e0e0, #a0a0a0);
border-radius: 50%;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}
.light {
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%);
width: 1vw;
max-width: 10px;
height: 2vw;
max-height: 20px;
background: rgba(255, 255, 0, 0.8);
border-radius: 50%;
box-shadow: 0 0 20px rgba(255, 255, 0, 0.8);
animation: blink 1s infinite;
}
.light:nth-child(2) {
left: 20%;
transform: translateX(-20%);
animation-delay: 0.3s;
}
.light:nth-child(3) {
left: 80%;
transform: translateX(-80%);
animation-delay: 0.6s;
}
@keyframes blink {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
document.addEventListener('DOMContentLoaded', () => {
const starContainer = document.getElementById('stars');
const starContainer2 = document.getElementById('stars2');
const ufo = document.getElementById('ufo');
const audioUrl = 'https://github.com/Ninja1375/Disco-Voador-/raw/main/ufo-sound.mp3';
// Crie um elemento de áudio e defina o link do áudio
const ufoSound = new Audio(audioUrl);
ufoSound.loop = true;
let position = 0;
let direction = 1;
const speed = 2; // Pixels por frame
const numberOfStars = 100;
for (let i = 0; i < numberOfStars; i++) {
const star = document.createElement('div');
star.classList.add('star');
star.style.top = `${Math.random() * 100}vh`;
star.style.left = `${Math.random() * 100}vw`;
starContainer.appendChild(star);
const star2 = document.createElement('div');
star2.classList.add('star2');
star2.style.top = `${Math.random() * 100}vh`;
star2.style.left = `${Math.random() * 100}vw`;
starContainer2.appendChild(star2);
}
function animate() {
position += speed * direction;
if (position >= window.innerWidth - 100 || position <= 0) {
direction *= -1;
}
ufo.style.transform = `translateX(${position}px)`;
requestAnimationFrame(animate);
}
// Tentar reproduzir o som automaticamente
ufoSound.play().catch(error => {
console.log("Error playing sound automatically: ", error);
// Tentar reproduzir o som ao passar o mouse
ufo.addEventListener('mouseenter', () => {
ufoSound.play().catch(err => console.log("Error playing sound on mouse enter: ", err));
}, { once: true });
});
animate();
});
Se preferir os códigos estão no meu repositório no GitHub.
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!