Um efeito interessante é o slideshow, imagens trocando em um intervalo de tempo com um efeito de transição, e já vimos como fazer um com elementos de imagem ou até outros elementos mas para fazer as imagens de fundo do site(o background do elemento body) ter um slideshow devemos fazer de outra forna, para isso podemos utilizar um plugin jQuery chamado supersized que resolve nosso problema. Então para começarmos baixe o plugin supersized e insira na sua página. 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<link href="supersized.css" rel="stylesheet">
<script src="supersized.3.2.7.min.js"></script>

Após isso configuramos o efeito na função fornecida pelo plugin. 

$(document).ready(function(){
			
	$.supersized({
		slideshow: 1,
		autoplay: 1,
		slides: [
				{image : 'wallpaper1.jpg'},
				{image : 'wallpaper2.jpg'},
				{image : 'wallpaper3.jpg'},
				],
	});
});

Na linha 3 chamamos a função que ativa o slideshow e passamos as opções que queremos, como por exemplo na linha 4 configuramos que o slideshow está ativo ( 1 ligado, 0 desligado), na linha 5 configuramos para que quando a página for carregada o slideshow deverá começar. Na linha 6 informamos quais as imagens que irão ficar alternando no background, ele aceita um array de objetos javascript, sendo que no momento só precisamos da propriedade image deste objeto que especifica o arquivo de imagem que queremos que fique no fundo.

Veja o exemplo acima funcionando.

Também podemos escolher qual efeito de transição queremos.

$(document).ready(function(){
				
	$.supersized({
		slideshow: 1,
		autoplay: 1,
		transition: 'carouselRight', //efeito de transição
		slides: [
			{image : 'wallpaper1.jpg', title : 'wallpaper1.'},
			{image : 'wallpaper2.jpg', title : 'wallpaper2.'},
			{image : 'wallpaper3.jpg', title : 'wallpaper3.'},
		],
	});
});

Como vemos no exemplo podemos alterar o efeito de troca de imagens através da propriedade transition, que recebe o como valor o nome do efeito ou um número que corresponde correspondente, então vamos a lista!

  • 0 ou none: Sem efeito de transição.(veja o exemplo)
  • 1 ou fade: A imagem vai sumindo lentamente e um nova vai aparecendo.(veja o exemplo)
  • 2 ou slideTop: A imagem desce do topo do navegador cobrindo a imagem anterior.(veja o exemplo)
  • 3 ou slideRight: A imagem desliza da direita cobrindo a imagem anterior.(veja o exemplo)
  • 4 ou slideBottom: A imagem sobe da parte inferior do navegado cobrindo a imagem anterior.(veja o exemplo)
  • 5 ou slideLeft: A imagem desliza da esquerda cobrindo a imagem anterior.(veja o exemplo)
  • 6 ou carouselRight: A imagem desliza da direita empurrando a imagem anterior para o lado.(veja o exemplo)
  • 7 ou carouselLeft: A imagem desliza da esquerda empurrando a imagem anterior para o lado.(veja o exemplo)

Existem outras propriedades que também são interessantes:

  • start_slide: Especifica em qual imagem do array de imagens(slides) o slideshow irá começar, a contagem das imagens começa em “1” pois se colocarmos o valor “0” a primeira imagem será aleatória. O valor padrão é “1”
  • stop_loop: Pausa o slideshow quando chegar na ultima imagem. “1” para parar e “0” para seguir em loop. O valor padrão é “0”
  • random: As imagens são exibidas em ordem aleatória. A propriedade start_slide é ignorada. Os valores aceitos são “0”(desligado) ou “1”(ligado). O valor padrão é “0”
  • slide_interval: Tempo em milissegundo entre a troca de imagens. O valor padrão é 5000
  • vertical_center: Se a imagem deve ser centralizada no sentido vertical. “1” vai ser alinhada e “0” não, o valor padrão é 1.
  • horizontal_center: Se a imagem deve ser centralizada no sentido horizontal.”1″ vai ser alinhada e “0” não, o valor padrão é 1.

Como sempre essas são só as propriedades mais básicas, para maiores detalhes e opções consulte a documentação do supersized.

Era isso pessoal!