https://github.com/ohthias/memories
📸 | Mural de fotos interativo com layouts dinâmicos e transições automáticas em tempo real
https://github.com/ohthias/memories
css dynamic-layout gallery gallery-images html javascript js masonry visual-experience web-design
Last synced: 2 days ago
JSON representation
📸 | Mural de fotos interativo com layouts dinâmicos e transições automáticas em tempo real
- Host: GitHub
- URL: https://github.com/ohthias/memories
- Owner: ohthias
- Created: 2026-05-21T19:42:17.000Z (11 days ago)
- Default Branch: master
- Last Pushed: 2026-05-22T11:39:40.000Z (10 days ago)
- Last Synced: 2026-05-22T17:39:41.784Z (10 days ago)
- Topics: css, dynamic-layout, gallery, gallery-images, html, javascript, js, masonry, visual-experience, web-design
- Language: JavaScript
- Homepage: https://ohthias.github.io/memories/
- Size: 12.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Memories
Mural de fotos dinâmico.
## Sobre o projeto
**Memories** é uma experiência visual de mural fotográfico que monta blocos de imagens em tela cheia com layouts variados, transições suaves e troca automática de composição ao longo do tempo.
O projeto foi desenvolvido com **HTML**, **CSS** e **JavaScript puro**, mantendo uma estrutura simples, leve e fácil de executar.
## Funcionalidades
- Mural de fotos em tela cheia
- Layouts predefinidos e alternados aleatoriamente
- Embaralhamento das imagens a cada renderização
- Transição com efeito de fade
- Zoom suave ao passar o mouse sobre cada foto
- Layout responsivo para diferentes tamanhos de tela
## Tecnologias utilizadas
- HTML5
- CSS3
- JavaScript
## Como funciona
O arquivo `script.js`:
- mantém uma lista de imagens externas;
- embaralha os elementos antes de renderizar;
- escolhe um layout aleatório;
- cria os blocos de foto dinamicamente;
- repete o processo automaticamente em intervalos aleatórios.
A interface principal é composta por:
- `index.html`, que estrutura a página;
- `style.css`, que define o visual e a responsividade;
- `script.js`, que controla a lógica do mural;
- `logo.png`, que exibe a identidade visual no topo da tela.
## Como executar
### Opção 1: abrir diretamente no navegador
Basta abrir o arquivo `index.html` em um navegador moderno.
### Opção 2: usar um servidor local
Você também pode rodar o projeto com uma extensão como **Live Server** no VS Code ou qualquer servidor estático simples.
## Estrutura do projeto
```bash
memories/
├── index.html
├── logo.png
├── script.js
└── style.css
```
## Personalização
Você pode personalizar o projeto alterando:
- a lista de imagens em `script.js`;
- os blocos e proporções dos layouts;
- as cores, animações e responsividade em `style.css`;
- o logo exibido no centro da composição.
## Observações
As imagens usadas no mural são carregadas de links externos. Se alguma URL deixar de responder, basta substituir a lista por novos endereços de imagem.