Animação Vulcão em Erupção:
Explore como criar uma animação impressionante de vulcão em erupção com este tutorial detalhado.
Um Vulcão ativo, saindo larvas e fumaça.
O fundo o céu escuro e com Relâmpagos.
Este projeto usa as três linguagens: HTML, CSS e JavaScript.
Veja a Animação de Vulcão em Erupção em funcionamento neste link. Animação de Vulcão em Erupção.
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 Vulcão em Erupção</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="volcano">
<div class="crater"></div>
<div class="lava-container"></div>
<div class="smoke-container"></div>
<div class="fire-container"></div>
</div>
<script src="script.js"></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
body {
background: linear-gradient(to bottom, #000, #120c56);
display: flex;
justify-content: center;
align-items: flex-end;
height: 100vh;
margin: 0;
overflow: hidden;
}
.volcano {
position: relative;
width: 150px;
height: 200px;
background: #8B4513;
margin-bottom: 50px;
border-radius: 200px 200px 0 0;
transform: scale(1.5);
}
.crater {
position: absolute;
top: 0;
left: 50%;
width: 100px;
height: 50px;
background: #000;
border-radius: 50%;
transform: translateX(-50%);
}
.lava-container {
position: absolute;
top: 0;
left: 50%;
width: 100px;
height: 0;
transform: translateX(-50%);
overflow: visible;
}
.lava {
position: absolute;
bottom: 0;
left: 50%;
width: 20px;
height: 80px;
background: orange;
border-radius: 50%;
transform: translateX(-50%);
animation: erupt 1s infinite ease-in-out;
}
@keyframes erupt {
0% { height: 0; opacity: 1; }
50% { height: 80px; opacity: 0.8; }
100% { height: 0; opacity: 1; }
}
.smoke-container {
position: absolute;
top: -60px;
left: 50%;
width: 150px;
height: 200px;
transform: translateX(-50%);
}
.smoke {
position: absolute;
bottom: 0;
left: 50%;
width: 30px;
height: 30px;
background: rgba(128, 128, 128, 0.7);
border-radius: 50%;
transform: translateX(-50%);
animation: smoke 3s infinite ease-in-out;
}
@keyframes smoke {
0% { transform: translateX(-50%) translateY(0) scale(0.5); opacity: 0.7; }
50% { transform: translateX(-50%) translateY(-100px) scale(1); opacity: 0.3; }
100% { transform: translateX(-50%) translateY(-150px) scale(1.5); opacity: 0; }
}
.fire-container {
position: absolute;
top: 0;
left: 50%;
width: 100px;
height: 100px;
transform: translateX(-50%);
overflow: visible;
}
.fire {
position: absolute;
bottom: 0;
left: 50%;
width: 20px;
height: 20px;
background: yellow;
border-radius: 50%;
transform: translateX(-50%);
animation: burn 0.5s infinite ease-in-out;
}
@keyframes burn {
0% { height: 20px; width: 20px; opacity: 1; background: yellow; }
50% { height: 40px; width: 40px; opacity: 0.8; background: orange; }
100% { height: 20px; width: 20px; opacity: 1; background: yellow; }
}
@keyframes lightning {
0%, 20%, 40%, 60%, 80%, 100% { opacity: 0; }
10%, 30%, 50%, 70%, 90% { opacity: 1; }
}
.lightning {
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7);
opacity: 0;
animation: lightning 3s infinite;
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
document.addEventListener('DOMContentLoaded', () => {
const lavaContainer = document.querySelector('.lava-container');
const smokeContainer = document.querySelector('.smoke-container');
const fireContainer = document.querySelector('.fire-container');
const body = document.querySelector('body');
// Criar lava em erupção
function createLava() {
const lava = document.createElement('div');
lava.classList.add('lava');
lava.style.left = `${Math.random() * 100}%`;
lavaContainer.appendChild(lava);
// Remover lava após animação
setTimeout(() => {
lava.remove();
}, 1000);
}
// Criar fumaça
function createSmoke() {
const smoke = document.createElement('div');
smoke.classList.add('smoke');
smoke.style.left = `${Math.random() * 100}%`;
smokeContainer.appendChild(smoke);
// Remover fumaça após animação
setTimeout(() => {
smoke.remove();
}, 3000);
}
// Criar fogo
function createFire() {
const fire = document.createElement('div');
fire.classList.add('fire');
fire.style.left = `${Math.random() * 100}%`;
fireContainer.appendChild(fire);
// Remover fogo após animação
setTimeout(() => {
fire.remove();
}, 500);
}
// Criar relâmpagos
function createLightning() {
const lightning = document.createElement('div');
lightning.classList.add('lightning');
body.appendChild(lightning);
// Remover relâmpago após animação
setTimeout(() => {
lightning.remove();
}, 300);
}
// Intervalo para criar lava, fumaça e fogo
setInterval(createLava, 500);
setInterval(createSmoke, 300);
setInterval(createFire, 200);
setInterval(createLightning, 5000);
});
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.
Comentários
Postar um comentário
Obrigado pelo seu feedback!