Pular para o conteúdo principal

Tutorial: Árvore de Natal com Luzes Piscando

Imagem que representa Árvore de Natal


Neste tutorial, você aprenderá como criar uma árvore de Natal estilizada com luzes piscando usando HTML, CSS e JavaScript. Este é um projeto divertido para praticar manipulação de DOM,

animações e estilização com CSS.

Veja a Árvore de Natal com Luzes piscando em funcionamento neste link. Árvore de Natal com Luzes Piscando.

Veja o vídeo no YouTube:

Passo 1: Preparando a Estrutura do Projeto

Crie uma pasta para o projeto e, dentro dela, os seguintes arquivos:

  • index.html
  • style.css
  • script.js

Certifique-se de vincular os arquivos CSS e JavaScript no HTML.

Passo 2: Estruturando o HTML

Adicione o código abaixo no arquivo 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>Árvore de Natal com Luzes</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="tree">
    <div class="star"></div>
    <div class="layer layer-1">
      <div class="light"></div>
      <div class="light"></div>
      <div class="light"></div>
    </div>
    <div class="layer layer-2">
      <div class="light"></div>
      <div class="light"></div>
      <div class="light"></div>
    </div>
    <div class="layer layer-3">
      <div class="light"></div>
      <div class="light"></div>
      <div class="light"></div>
    </div>
    <div class="trunk"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Explicação:

  • .tree: Contém toda a estrutura da árvore.
  • .layer: Representa cada camada da árvore (os triângulos).
  • .light: Cada luz da árvore.
  • .trunk: O tronco da árvore.
  • .star: A estrela no topo.

Passo 3: Estilizando com CSS

No arquivo style.css, adicione os estilos para a árvore e seus elementos:



body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #0c1e3e;
}

.tree {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.star {
  width: 50px;
  height: 50px;
  background: gold;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  margin-bottom: -10px;
}

.layer {
  position: relative;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 80px solid #2e8b57;
  margin: -10px 0;
}

.layer-2 {
  border-left-width: 120px;
  border-right-width: 120px;
  border-bottom-width: 100px;
}

.layer-3 {
  border-left-width: 140px;
  border-right-width: 140px;
  border-bottom-width: 120px;
}

.trunk {
  width: 40px;
  height: 60px;
  background: #8b4513;
  border-radius: 5px;
}

.light {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #444;
  box-shadow: 0 0 10px #000;
  transition: background-color 0.5s, box-shadow 0.5s;
}

.layer-1 .light:nth-child(1) {
  top: 40px;
  left: -43px;
}
.layer-1 .light:nth-child(2) {
  top: 40px;
  left: -8px;
}
.layer-1 .light:nth-child(3) {
  top: 40px;
  left: 30px;
}

.layer-2 .light:nth-child(1) {
  top: 60px;
  left: -63px;
}
.layer-2 .light:nth-child(2) {
  top: 60px;
  left: -8px;
}
.layer-2 .light:nth-child(3) {
  top: 60px;
  left: 50px;
}

.layer-3 .light:nth-child(1) {
  top: 80px;
  left: -83px;
}
.layer-3 .light:nth-child(2) {
  top: 80px;
  left: -8px;
}
.layer-3 .light:nth-child(3) {
  top: 80px;
  left: 70px;
}

        

Passo 4: Animando as Luzes com JavaScript

No arquivo script.js, adicione o código abaixo para criar o efeito de piscada das luzes:



// Seleciona todas as luzes
const lights = document.querySelectorAll('.light');

// Função para alternar as cores das luzes
function twinkleLights() {
  lights.forEach(light => {
    const colors = ['red', 'yellow', 'blue', 'green', 'orange', 'white'];
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    light.style.backgroundColor = randomColor;
    light.style.boxShadow = `0 0 15px ${randomColor}`;
  });
}

// Alterna as cores a cada 500ms
setInterval(twinkleLights, 500);

        

O que está acontecendo?

  • Selecionamos todas as luzes da árvore usando querySelectorAll.
  • A função twinkleLights troca a cor de cada luz para uma cor aleatória.
  • O efeito de piscada é criado com o método setInterval, que executa a função a cada 500ms.

Resultado Final

Ao abrir o arquivo index.html no navegador, você verá uma árvore de Natal estilizada com luzes coloridas piscando.

Possíveis Melhorias

  1. Adicionar interatividade:
    • Um botão para ligar/desligar as luzes.

  2. Personalização:
    • Permitir que o usuário escolha as cores das luzes.

  3. Efeitos extras:
    • Adicionar neve caindo usando animações CSS.

Se preferir os códigos estão no meu Repositório no GitHub.

Este projeto é uma ótima introdução para praticar manipulação de DOM e animações dinâmicas. Experimente adaptá-lo e compartilhe sua criação!

Boas festas e bons códigos! 🎅🎄

Comentários

Mais vistas

Autocode - Significado e Funcionalidade

O Que é Autocode? O Autocode foi uma das primeiras linguagens de programação de computador, desenvolvida em 1952 por Alick Glennie para o computador Mark 1 na Universidade

Semáforo - HTML, CSS e JavaScript - Tutorial

Semáforo Funcional: Aprenda a criar um semáforo funcional com este tutorial detalhado. Descubra como implementar a lógica de controle de um semáforo usando HTML, CSS e JavaScript.

Animação Roleta de Prêmios - HTML, CSS e JavaScript - Tutorial

Animação Roleta de Prêmios: Descubra como criar uma animada roleta de prêmios com este tutorial detalhado. Este projeto consiste em uma Animação,  uma roleta