Criando ciclo de dia e noite com HTML, CSS e Java-Script

Enviado por mrab em 11. Fevereiro 2024 - 16:13

Neste tutotrial, mergulhe em uma animação fascinante que simula o ciclo do dia e da noite, tudo isso com apenas alguns poucos códigos em HTML, CSS e JavaScript!

Recursos do Código:
- O movimento dinâmico do sol e da lua, criando uma transição suave entre dia e noite.
- A mudança de cor do céu em diferentes momentos do dia, trazendo uma atmosfera realista à cena.
- A alteração da fase da lua ao longo do ciclo, acrescentando detalhes adicionais à animação.

Desafio:
Experimente adicionar uma animação de fogos de artifício para tornar a cena ainda mais vibrante e dinâmica!

link para os códigos: sun-moon.zip

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dia e noite Animação</title>
<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;  
    }
    
    .container {
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden; 
    }
    
    .sun, .moon {        
        position: absolute;
        border-radius: 50%;
        
    }
    
    .sun {
        width: 100px;
        height: 100px; 
         overflow: hidden;       
    }
    .moon {
        background: #d3d3d3;
        width: 60px;
        height: 60px;
         overflow: hidden;
    }

.cidade {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0%);
    z-index: 1; /* Para colocar a imagem atrás do conteúdo principal */
}

.estrelas {
   position: fixed; 
    bottom: 0;
    width: 100%;    
    height: 100%;
    object-fit: cover;
    z-index: -1; /* Para colocar a imagem atrás do conteúdo principal */
}

</style>
</head>
<body>

let sunAngle = 90;
    let moonAngle = -180;
    let moonPhase = 0;
    let brightness=20
    let opacidade=0

if (sunAngle <= -90)
        {
         sunAngle = 270;

}

/* começo da noite  */
       if (moonAngle <= -90) 
        {
        moonAngle = 270;
       
       /* a final da noite, incrementa +1 e muda o array que carrega a imagem da fase da lua */; 
        moonPhase += 1; 
      /* ----------------------------------------------------------------------------------- */
        brightness=20          
        opacidade=.4     
       }

/* controla do bilho do fundo cidade */
       if (sunAngle>179)
       {
       brightness +=0.1              
       }
    
     if (sunAngle>89 && sunAngle<179 )
       {
       brightness -=0.1
       
       //console.log('opacidade', opacidade);
       }

/* controle da visibilidade das estrelas */
       if (sunAngle>225 && sunAngle<270 )
       {      
       opacidade  -=0.001       
       }

if (sunAngle>90 && sunAngle<135 )
       {      
       opacidade +=0.001       
       }

/* muda as propriedade do css das classes cidade e estrelas */ 
      document.querySelector('.cidade').style.filter = `brightness(${brightness}%)`;
      document.querySelector('.estrelas').style.opacity = opacidade;

}

function animateSky() {
    const timeOfDay = (sunAngle - 90) / 180; // Calcula a posição do sol no dia (0 a 1)
    
    // Cores para diferentes momentos do dia
    const colors = [        
        [0, 0, 0], // preto (anoitecer)
        [205, 95, 67],  // laranja (crepúsculo) 
        [3, 115, 188],   // azul escuro (noite)
        [135, 206, 235], // azul claro (amanhecer)
        [3, 115, 188],  // azul escuro (manhã)                     
        [205, 95, 67],  // laranja (crepúsculo)
        [0, 0, 0] // preto (anoitecer)

];
    
    // Calcula os índices das cores apropriadas
    const index1 = Math.floor(timeOfDay * (colors.length - 1));
    const index2 = Math.ceil(timeOfDay * (colors.length - 1));
    if (index1<0) index1=1
    if (index2<0) index2=1

// Interpolação linear entre as cores
    const progress = timeOfDay * (colors.length - 1) - index1;
    
    if (progress==null) progress=0
    const [r1, g1, b1] = colors[index1];
    const [r2, g2, b2] = colors[index2];
    const r = Math.round(r1 + (r2 - r1) * progress);
    const g = Math.round(g1 + (g2 - g1) * progress);
    const b = Math.round(b1 + (b2 - b1) * progress);

// Define a cor de fundo do corpo da página
    document.body.style.background = `rgb(${r}, ${g}, ${b})`;
}

/* muda a fase da lua */
    function animateMoonPhase() {
   
       
        if (moonPhase >= 4) moonPhase = 0;

const phaseImages = ['lua_nova.png', 'lua_crescente.png', 'lua_cheia.png', 'lua_minguante.png'];
        moon.src = phaseImages[moonPhase];
     
    }

setInterval(() => {
        animateSunAndMoon();
        animateSky();
        animateMoonPhase();

}, 10);

document.addEventListener('DOMContentLoaded', (event) => {
    animateSky(); // Inicia a animação do céu assim que o documento for carregado
    animateMoonPhase();
});

</script>

</body>
</html>

Seção:

Java-script