jQuery: Background aleatório

Blog

- jQuery: Background aleatório
- Enviado em 07/10/2010 20:15
- Que tal causar uma boa impressão em seu site utilizando um background dinâmico? Para isso, precisaremos de jQuery, um pouco de CSS e algumas imagens. Vamos lá!
  
  Preparando o CSS
```
html, body 
{
	height: 100%; 
	margin: 0;
}
	div.bg 
	{
		position: absolute; 
		width: 100%; 
		height: 100%; 
		background-position: center bottom; 
		background-repeat: no-repeat;
	}
div#background1 
{
	background-image: url(http://dl.zatecus.com/2010-10/23fzl6da.jpg);
}
div#background2 
{
	background-image: url(http://dl.zatecus.com/2010-10/b6o615z8.jpg);
}
```
  Preparando o HTML
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Lorem ipsum dolor sit amet</title>
    </head>
    <body>
        <div class="bg" id="background1"></div>
        <div class="bg" id="background2"></div>
    </body>
</html>
```
  Script
```
$(document).ready(function()
{
	
	/* Classe padrão dos backgrounds */
	var bgClass = "div.bg";
	
	/* Prefixo para IDs dos backgrounds */
	var bgPrefix = "background";
	
	/* Tempo para fade in-out */
	var fade = 3000;
	
	/* Não precisa alterar estas =P */
	var bgSize = $(bgClass).size();
	var curSize = 1;
	var timerSrc = "";
	
	/* Mostra apenas o primeiro bg */
	$(bgClass).hide();
	$(bgClass + ':first').show();
	
	/* Se houver divs com classes BG */
	if (bgSize)
	{
		/* Inicia o loop dos backgrounds */
		timerSrc = setInterval (function ()
		{
			
			/* Oculta um fundo e exibe outro */
			$('#' + bgPrefix + curSize).fadeOut(2000);
			curSize = (curSize >= bgSize) ? 1 : curSize + 1;
			$('#' + bgPrefix + curSize).fadeIn(1000);
			
		}, fade);
	}
	
});
```
  O resultado final você confere nessa demonstração.
  Dica e abraços do Zatec :)
Tweet
- - Felipe comentou em 08/10/2010 13:17:
  - Eu vou usar... Concerteza.... =)
- - Washington comentou em 08/10/2010 17:41:
  - Eu já usei :) Só que usei o Jquery Cycle pra fazer o loop.
- - jadson comentou em 22/11/2010 01:53:
  - Vejamos isto seria mais uma pergunta do que comentário. eu gostaria de que a background mudasse em horários específicos. tem como? tipo de 06:00 hs ele muda e de 18:00 hs ele muda de novo. agradecido desde então...
- - Guilherme Madaleno comentou em 22/11/2010 09:30:
  - Olá Jadson, é possível sim. E é mais simples do que essa função. Basicamente poderá utilizar as funções de data e tempo do Javascript. Assim que possível postarei algo como sugeriu aqui no blog. Abraços :)
- - Ck comentou em 09/02/2011 11:25:
  - Teria algum jeito de preogramar a duração de uma imagem mais prolongada do que a outra, como no site: www . hillsongunited . com ? Please, Agurado respostas obrigado
- - Guilherme comentou em 10/02/2011 11:31:
  - Olá CK. Talvez precisaria utilizar a função setInterval() para definir a duração das imagens e algumas condições. Assim que tiver um tempinho eu tento bolar algo como sugeriu e posto aqui no blog. Abraços!
- - Antonio José comentou em 04/05/2011 11:03:
  - Muito boa a sua dica! Excelente post parabéns!
- - Guilherme Madaleno comentou em 04/05/2011 11:16:
  - Obrigado Antonio! ;-)
- - Alexandre Broggio comentou em 15/07/2011 14:08:
  - Poxa que efeito bacana, Vlw por compartilhar
- - Guilherme Madaleno comentou em 23/07/2011 11:49:
  - Valeu Alexandre!
- - Bruno comentou em 11/08/2011 22:13:
  - Pessoal, tenho esse código http://freetexthost.com/gd32s5sde4 estou usando "no-repeat" por isso onde não tem imagem fica branco. Queria deixar preto essa parte sem imagem. podem me ajudar? vlw
- - Guilherme Madaleno comentou em 11/08/2011 22:49:
  - Olá Bruno! No CSS da página, tente incluir, por exemplo body {background-color: black;} Espero que isso resolva! Abraços!
- - Harrison Cardillo comentou em 30/10/2011 10:42:
  - como colocar video em apenas uma das paginas, sendo que quando eu der play no video que vai se encontrar apenas em uma background o slide vai parar para rodar o video.
- - Renan Oestmann comentou em 11/02/2012 13:33:
  - Galerê... desculpa minha ignorância... mas isso era o que sempre procurei pro meu site... mas não sei em qual tipo de arquivo devo colocar as partes do script acima! Se como uma parte em CSS e outra em HMTL e outra em JS... poderiam me ajudar por favor...
- - Guilherme comentou em 12/02/2012 20:28:
  - Olá Renan. Se for o que entendi, você pode incluir em sua página HTML, PHP ou ASP, por exemplo. Basta seguir o código modelo da demonstração!
Envie seu comentário!

Comentário

Nome:

E-mail: (Não será divulgado)

Site ou blog: (Opcional)

Comentário: (Máximo de 255 caracteres)

Enviar

Veja também:

Blog

Preparando o CSS

Preparando o HTML

Script

Comentário

Veja também: