Animação Eclipse Solar:
Explore como criar uma animação realista de um eclipse solar com este tutorial abrangente completo.
Tudo começa com o sol e um céu azul no fundo, quando a sombra da terra passa na frente do sol acontece o Eclipse e o céu fica escuro, ao terminar o Eclipse o céu volta a ficar azul. Este processo fica se repetindo!
Este projeto usa as linguagens HTML, CSS e JavaScript.
Veja a Animação de Eclipse Solar em funcionamento neste link. Animação de Eclipse Solar.
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>Animacão de Eclipse Solar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="eclipse-container">
<div class="sun"></div>
<div class="moon-shadow"></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-color: #87CEEB; /* Fundo azul (cor do céu) */
transition: background-color 1s; /* Transição suave de cor */
}
.eclipse-container {
position: relative;
width: 200px;
height: 200px;
}
.sun {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
height: 200px;
width: 200px;
background-color: #fae20a;
border-radius: 50%;
box-shadow: 0 0 50px 20px rgba(255, 165, 0, 0.5);
}
.moon-shadow {
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 50%;
top: 50%;
left: -200px; /* Início fora da tela à esquerda */
transform: translateY(-50%);
animation: move-shadow 20s infinite;
z-index: 2;
}
@keyframes move-shadow {
0% {
left: -200px;
}
50% {
left: 0%; /* Centro da tela */
}
100% {
left: 200px; /* Fim fora da tela à direita */
}
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
document.addEventListener(
'DOMContentLoaded', () => {
const moonShadow = document
.querySelector('.moon-shadow');
const body = document.body;
function checkAlignment() {
const moonRect = moonShadow
.getBoundingClientRect();
const moonCenter = moonRect.left +
moonRect.width / 2;
const screenCenter = window
.innerWidth / 2;
if (Math.abs(moonCenter -
screenCenter) < moonRect.width /
2) {
body.style.backgroundColor =
'#000'; // Fundo preto
} else {
body.style.backgroundColor =
'#87CEEB'; // Fundo azul (cor do céu)
}
requestAnimationFrame(
checkAlignment);
}
checkAlignment();
});
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!