Um plugin JavaScript leve e responsivo que cria um efeito de grid animado com mudança de backgrounds nas células. Perfeito para criar backgrounds dinâmicos e visualmente atraentes em websites.
- ✅ Totalmente responsivo - Adapta-se a qualquer tamanho de tela
- ✅ Leve e performático - Sem dependências externas (jQuery não é necessário)
- ✅ Fácil de usar - Configuração simples com apenas alguns parâmetros
- ✅ Animações suaves - Transições CSS3 para efeitos profissionais
- ✅ Múltiplas imagens - Suporta arrays de imagens para backgrounds variados
-
Baixe os arquivos do projeto:
jquery.gridanimatedbackground.jsjquery.gridanimatedbackground.css
-
Inclua os arquivos no seu HTML:
<link rel="stylesheet" href="jquery.gridanimatedbackground.css">
<script src="jquery.gridanimatedbackground.js"></script>- Crie um elemento container com o ID
GridAnimatedBackground:
<div id="GridAnimatedBackground"></div>- Configure o array de imagens e chame a função:
var background = [
"caminho/para/imagem1.jpg",
"caminho/para/imagem2.jpg",
"caminho/para/imagem3.jpg"
];
// GridAnimatedBackground(images, columns, rows, time)
GridAnimatedBackground(background, 6, 4, 1000);A função GridAnimatedBackground aceita os seguintes parâmetros:
| Parâmetro | Tipo | Padrão | Descrição |
|---|---|---|---|
background |
Array | obrigatório | Array com os caminhos das imagens |
column |
Number | 6 |
Número de colunas no grid |
row |
Number | 4 |
Número de linhas no grid |
time |
Number | 1000 |
Intervalo de animação em milissegundos |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grid Animated Background</title>
<link rel="stylesheet" href="jquery.gridanimatedbackground.css">
</head>
<body>
<div id="GridAnimatedBackground"></div>
<script src="jquery.gridanimatedbackground.js"></script>
<script>
var background = [
"https://example.com/image1.jpg",
"https://example.com/image2.jpg",
"https://example.com/image3.jpg",
"https://example.com/image4.jpg"
];
// Grid com 4 colunas, 4 linhas, animação a cada 1 segundo
GridAnimatedBackground(background, 4, 4, 1000);
</script>
</body>
</html>O CSS pode ser facilmente customizado para ajustar:
- Tamanho e posicionamento do grid
- Duração das transições
- Efeitos de transformação (rotação, escala)
Edite as classes em jquery.gridanimatedbackground.css conforme necessário.
- As imagens são selecionadas aleatoriamente do array fornecido
- O efeito de animação aplica transformações 3D para criar transições suaves
- O grid é totalmente responsivo e se adapta ao tamanho do container
Adriano Campos
v1.2.0
A lightweight and responsive JavaScript plugin that creates an animated grid effect with changing cell backgrounds. Perfect for creating dynamic and visually appealing backgrounds on websites.
- ✅ Fully responsive - Adapts to any screen size
- ✅ Lightweight and performant - No external dependencies (jQuery not required)
- ✅ Easy to use - Simple configuration with just a few parameters
- ✅ Smooth animations - CSS3 transitions for professional effects
- ✅ Multiple images - Supports image arrays for varied backgrounds
var background = [
"path/to/image1.jpg",
"path/to/image2.jpg",
"path/to/image3.jpg"
];
GridAnimatedBackground(background, 6, 4, 1000);| Parameter | Type | Default | Description |
|---|---|---|---|
background |
Array | required | Array with image paths |
column |
Number | 6 |
Number of columns in the grid |
row |
Number | 4 |
Number of rows in the grid |
time |
Number | 1000 |
Animation interval in milliseconds |