Animação Cometa Halley:
Aprenda a criar uma incrível animação do Cometa Halley com este tutorial passo a passo utilizando HTML, CSS e JavaScript.
A imagem do cometa passando sobre o céu estrelado.
Veja a Animação do Cometa Halley em funcionamento neste link. Animação do Cometa Halley.
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 do Cometa Halley</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="stars"></div>
<div id="stars2"></div>
<div id="comet-container">
<div id="comet">
<div class="tail"></div>
<div class="tail"></div>
<div class="tail"></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);
}
}
#comet-container {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
#comet {
position: absolute;
top: 50%;
left: 100%;
width: 30px;
height: 30px;
background: white; /* Cor do cometa */
border-radius: 50%;
box-shadow: 0 0 30px white, 0 0 60px white, 0 0 90px white;
animation: moveComet 5s linear infinite;
}
.tail {
position: absolute;
width: 200px;
height: 28px; /* Altura ajustada para suavizar a transição */
background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 0, 0.8), rgba(255, 160, 0, 1)); /* Invertido para ter a parte fina atrás */
top: 5%;
left: 15px; /* Ajuste para começar atrás do cometa */
transform-origin: right center;
border-radius: 0 50% 50% 0; /* Forma pontuda e arredondada invertida */
animation: fadeTail 5s linear infinite;
z-index: -1; /* Certifica-se de que a cauda esteja atrás do cometa */
}
.tail:nth-child(2) {
top: 5%;
left: 15px;
transform-origin: right center;
border-radius: 0 50% 50% 0; /* Forma pontuda e arredondada invertida */
animation: fadeTail 5s linear infinite 0.2s;
z-index: -1;
}
.tail:nth-child(3) {
top: 5%;
left: 15px;
transform-origin: right center;
border-radius: 0 50% 50% 0; /* Forma pontuda e arredondada invertida */
animation: fadeTail 5s linear infinite 0.4s;
z-index: -1;
}
@keyframes moveComet {
0% {
left: 100%;
top: 50%;
}
100% {
left: -10%;
top: 20%;
}
}
@keyframes fadeTail {
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 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);
}
// Animação do Cometa
function animateComet() {
const comet = document.getElementById('comet');
let positionX = 100; // Start position
let positionY = 50; // Start position
function moveComet() {
positionX -= 1; // Move left
positionY -= 0.6; // Move up slightly
if (positionX < -10) {
positionX = 100; // Reset position when out of view
positionY = Math.random() * 100; // Randomize Y position
}
comet.style.left = `${positionX}%`;
comet.style.top = `${positionY}%`;
requestAnimationFrame(moveComet);
}
moveComet();
}
animateComet();
});
4° Passo: Testar o Projeto!
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!
Se preferir os códigos estão no meu Repositório no GitHub.
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!