Background aleatório

Postado por Abraão Levi Oliveira Figueredo em 15 de janeiro de 2010

Outro dia estava navegando na internet quando observei um site que havia uma espécie de background randômico. Achei muito interessante e resolvi entender como funcionava. Ao desenvolver o meu, percebi que era muito mais fácil do que imaginei.

Sei que para fazer isso pode-se usar diversas técnicas diferentes, mas irei mostrar primeiramente utilizando PHP, que eu achei mais simples.

Background randômico com imagens – PHP

Crie uma pasta onde irá conter as imagens, no meu caso dei o nome de imagens mesmo, e coloquei as imagens com os nomes de BG0.jpg, BG1.jpg, BG2.jpg, BG3.jpg, BG4.jpg, e apliquei o código PHP junto com o CSS no Próprio elemento que vai receber o background:

<div style="background: url(imagens/BG<?php echo $numero = rand(0,4);?>.jpg);">

Bom, como se pode observar é bem simples, então vamos entender o que está acontecendo:

Usamos simplesmente o comando “rand(numeroMIN, numeroMAX)” que escolhe aleatoriamente um numero entre o “numeroMIN” e o “numeroMAX”. O comando “echo” exibi na tela a variável $numero que recebe o numero randômico. Por exemplo, se o “rand” nos trazer o numero 2, quando o servidor PHP processar o script nos devolverá o seguinte código:

<div style="background: url(imagens/BG2.jpg);">

Isso pode ser aplicado a outros elementos, como o BODY.

Background randômico com imagens -JavaScript

Como já dito anteriormente, existem diversas formas, técnicas e diferentes linguagens para se fazer um background aleatório. Vamos fazer agora com JavaScript.

<script>
var imagem = new Array(4);
 
imagem[0] = "bg0.jpg";
imagem[1] = "bg1.jpg";
imagem[2] = "bg2.jpg";
imagem[3] = "bg3.jpg";
imagem[4] = "bg4.jpg";
 
var n = parseInt(Math.random()*4);
 
document.write('<div style="background: url(imagens/'+imagem[n]+');"');
document.write('</div>');
</script>

Usando a mesma lógica do “rand” do PHP só que com JavaScript, usando o “Math.random”. Colocamos num Array as imagens, e a partir de um numero que foi gerado de um random, colocamos o index do Array e concatenamos o ele com a String que vai ser impressa na Página com o comando “document.write(String)”.

Background randômico com cores – PHP

Com as cores, ao invés de imprimirmos números achei melhor devolver Strings.

<?php
$numero = rand(0,3);
 
switch($numero){
case 0:
$bg = "#CCC";
break;
case 1:
$bg = "#333";
break;
case 2:
$bg = "#666";
case 3:
$bg = "#999";
}
?>
 
<body style="background:<?php echo $bg;?>">

Poderíamos ter usados vários IF ou IF encadeados, mas não há a necessidade disso não é verdade? Com o Switch fica mais fácil de compreender o código: caso o numero seja 0 $bg recebe “#ccc”, e assim por diante.

Background randômico com cores – JavaScrpit

De forma muito similar ao PHP podemos fazer com o JavaScript:

<script>
var cor;
var numero = parseInt(Math.random()*4);
 
switch(numero){
case 0:
cor = "#CCC";
break;
case 1:
cor = "#333";
break;
case 2:
cor = "#666";
break;
case 3:
cor = "#999";
break;
}
 
document.write('<body style="background:' + cor + ';"');
</script>

Veja o resultado em PHP e o resultado em JavaScript

Então é isso! Como podem ver, fazer backgrounds randômicos ou aleatórios é muito simples. Esses exemplos não são padrões, você pode usar lógicas diferentes, porém dessa forma que julguei mais simples. Até a próxima!

Artigo postado em: PHP

Tags: aleatório, background, javascript, PHP, random

Imprimir este artigo

Compartilhe:

Get Shareaholic

Sobre: Abraão Levi Oliveira Figueredo

Desenvolvedor web do Kekanto um guia colaborativo de Restaurantes, Bares, Baladas. Acredita em idéias simples e usabilidade. Sigam @AbraaoLevi

Comentários (6)

Lucas 1 de fevereiro de 2010 às 23:43

usei um recurso com array em vez de case mais muito bom esse que postou pra galera adorei teu site brother muito bom .

Bobrinha 7 de junho de 2010 às 7:51

vlw ajudou bastante simples e objetivo, parabéns

ridson 30 de setembro de 2010 às 18:33

Eu tentei acrescentar seus códigos no wordpress 3.0.1 e não consegui acrescentar, você pode me dar uma ajuda de como eu faço isso?
Estou quebrando a cabeça e nao funciona.

O único código que funcionou foi os das cores em php que eu joguei no header, más eu quero que funcione com imagens e nao com cores.

Abraão Levi 1 de outubro de 2010 às 21:42

@ridson, talvez o ele esteja montando a url errada no css, tente colocar com a url completa.

ex: ao invez de <div style="background: url(imagens/BG.jpg);”>

tente com <div style="background: url(http://seu_dominio.com/wp-content/themes/seu_tema/imagens/BG.jpg);”>

Esse é um problema corriqueiro ao se usar um CMS ou um framework. Se você não conseguir, especifique melhor o seu problema pra vê se eu posso te ajudar.

Abraços!

Augusto 3 de janeiro de 2011 às 9:17

Muito bom mesmo!
Dúvida: Eu quero que o mesmo background não repita, como faço?

Abraão Levi 15 de janeiro de 2011 às 9:32

Olá Auguto, você teria que usar alguma forma de persistência de dados para saber qual foi o background utilizando anteriormente