2

Preciso criar um fundo para meu site no estilo mosaico de fotos. Quando a página abrir, o fundo do site é preenchido por fotos, preenchendo a largura total da janela (ou seja, precisa ser responsivo) e uma altura determinada.

Clique aqui para ver um exemplo animado e um JSFiddle.

Pesquisei alguns plugins e encontrei este aqui. Ele faz exatamente o que quero, porém, ele não trabalha com background.

Vocês tem alguma sugestão de plugin? Ou de como posso criar esse efeito?


EDITADO

A estrutura que eu tenho para listar as imagens é algo parecido com isso:

<div class="bg-mosaico">
   <img src="imagem 1" />
   <img src="imagem 2" />
   <img src="imagem 3" />
   ...
</div>

É simples, por isso acho que um plugin não seja necessariamente útil, e que eu posso criar uma função simples com o mesmo objetivo. Pesquisei e encontrei isto:

var imgMOSAICO = $('.bg-mosaico img');
imgMOSAICO.hide();
imgMOSAICO.each(function() {
   $(this).delay( Math.random()*500+500 ).fadeIn();
});

Funciona, as imagens aparecem. O problema é que elas não aparecem uma a uma, elas aparecem quase que todas ao mesmo tempo. E eu preciso que elas fiquem fixas, pois tem que ter uma quantidade exata de imagens.. e dependendo da resolução, elas vão quebrando linha e não pode.

5
  • O código não parece complicado para adaptar (github.com/ed-lea/jquery-collagePlus/blob/master/…), chegou a tentar mexer nele?
    – brasofilo
    Commented 3/11/2014 às 18:53
  • 2
    Você diz editar o próprio arquivo .js? Pois não tenho muito conhecimento para editar um plugin feito. Hehehe.
    – Ricardo
    Commented 3/11/2014 às 18:54
  • Pode explicar o que é o background? Você diz "ao fundo...preenchendo largura total e determinada altura", consegue fazer uma boneca em CSS? . . . (acabo de ver que linkei errado acima, mas sim o JS do plugin)
    – brasofilo
    Commented 3/11/2014 às 18:58
  • jsfiddle.net/6k3xuy8g | É o fundo da página. O mosaico preencheria a largura total da janela (ou seja, responsivo) e teria uma altura máxima. E em cima disso, o conteúdo do site.
    – Ricardo
    Commented 3/11/2014 às 19:04
  • 2
    Ok, o legal é inserir esse tipo de esclarecimento no corpo da pergunta, assim o próximo interessado tem o panorama completo na primeira leitura.
    – brasofilo
    Commented 3/11/2014 às 19:06

1 Resposta 1

1

Se as imagens não são dinâmicas, acho melhor fazer uma imagem estática e utilizar como background. Pra se ajustar ao body use a propriedade background-size:100% 100%; do CSS3.

1
  • Sim, enquanto eu não encontro uma solução para a criação do mosaico, eu deixei como uma imagem estática mesmo. valeu.
    – Ricardo
    Commented 27/11/2014 às 19:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .