https://github.com/ninja1375/semaforo
🚦Semáforo é uma simulação simples de um semáforo funcional feito com HTML, CSS e JavaScript.
https://github.com/ninja1375/semaforo
css html javascript
Last synced: 2 months ago
JSON representation
🚦Semáforo é uma simulação simples de um semáforo funcional feito com HTML, CSS e JavaScript.
- Host: GitHub
- URL: https://github.com/ninja1375/semaforo
- Owner: Ninja1375
- Created: 2024-10-20T20:48:45.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-11-04T17:34:34.000Z (7 months ago)
- Last Synced: 2025-02-07T19:16:39.788Z (4 months ago)
- Topics: css, html, javascript
- Language: CSS
- Homepage: https://ninja1375.github.io/Semaforo/
- Size: 18.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
**Veja o projeto ao vivo:**
**[Semáforo](https://ninja1375.github.io/Semaforo/)**
Este **Semáforo** é uma simulação simples de um semáforo funcional feito com **HTML, CSS e JavaScript.** Ele consiste em um retângulo vertical que contém três luzes circulares, representando as cores típicas de um semáforo: **vermelho, amarelo e verde.** Abaixo do semáforo, há um poste cinza, que dá uma aparência mais realista. O semáforo é responsivo, ou seja, ele se ajusta automaticamente a diferentes tamanhos de tela, tornando-o adequado para visualização em dispositivos móveis e desktop.
## Funcionalidades: ##
**1 - Ciclo de Luzes:**
O semáforo segue uma ordem específica de iluminação das luzes:
**Amarelo:** A primeira luz a acender ao carregar a página.
**Vermelho:** Acende logo após a luz amarela.
**Verde:** Acende por último, após o vermelho.
Este ciclo se repete indefinidamente a cada 3 segundos.
**2 - Transições suaves:**
A transição entre as luzes é feita de forma suave com um efeito de opacidade, criando uma mudança visual agradável quando a luz se acende e apaga.
**3 - Responsividade:**
O semáforo adapta-se automaticamente a diferentes tamanhos de tela. Em dispositivos com telas menores, como smartphones, o semáforo e as luzes diminuem de tamanho, mantendo a sua proporção e funcionalidade.
**4 - Poste realista:**
O poste foi adicionado na base do semáforo para dar uma aparência mais realista, simulando um semáforo de rua.
**5 - Uso de JavaScript:**
O comportamento das luzes é controlado por JavaScript, que alterna entre as luzes de acordo com a ordem estabelecida. A função ```setInterval``` é usada para mudar a luz a cada 3 segundos, garantindo a continuidade do ciclo.
**6 - Início ao carregar a página:**
Assim que a página é carregada, a luz amarela acende automaticamente, e o ciclo começa de acordo com a ordem estabelecida.
Este semáforo é uma implementação simples e eficiente para demonstrar conceitos básicos de animação e controle de elementos com JavaScript, além de boas práticas de design responsivo com CSS.
## linguagens Utilizadas ##
## Apoie-me:
