criar background rotativo e menu transparente

[estrellainfo 0]

Bom dia Galera,

 

Estou tentando criar um site com fundo de imagens trocando cada 30 segundos + -, as imagens irão preencher a tela toda com ajuste automático e quero fazer um menu transparente .

 

Alguém pode me dar dicas ? andei lendo e não estou conseguindo .

 

Obrigado,

 

[TheBonesCodes 4]

para criar menus transparentes no "background:<color>;" você usa rgba que tem um canal extra do alfa.

http://www.w3schools.com/cssref/css_colors_legal.asp

para criar as imagens acho que usando um animete do css já é o suficiente.

http://www.w3schools.com/css/css3_animations.asp

[L. Henrique 179]

/* MENU */
Para criar um menu transparente, você pode fazer isso de quatro formas:

• background: rgba(0,0,0,0);
• background: transparent;
• background: none; - Para valores nulos / não exibição do fundo.
• opacity: 0;

Lembrando que para o Opacity se tornar cross-browser, você precisa adicionar comandos como filter: alpha(opacity=#);

Você pode conferir todos esses métodos funcionando no JSFiddle que preparei.

/* IMAGEM */

Algumas pessoas já pediram isso antes em vários lugares diferentes, a pergunta é: Você precisa de um campo que fique substituindo a imagem anterior por uma nova, ou está querendo um carousel/slider? (Veja o que é um Carousel/Slider)

Nesse você pode usar só um animate de CSS (que o cálculo vai ficar meio ruim), também dependendo do tanto de imagens que você vai ter OU trabalhar com javascript pra trocar o src do elemento img pra receber uma nova imagem.

Se você quiser um exemplo disso funcionando, acesse o JSFiddle e veja a demo.

Caso não consiga acessar, fica aqui o código utilizado:

var imagens = [];
		
imagens[0] = "http://migre.me/t87x5";
imagens[1] = "http://migre.me/t87xm";
imagens[2] = "http://migre.me/t87xP";            							
/* Aqui você pode ter N imagens[#] */

var i = 0;
setInterval(substituirImagem, 3000);

function substituirImagem() {
	i = i < imagens.length ? i : 0;
  console.log(i);
  
  $('.wrapper img').fadeOut(100, function() {
  	$(this).attr('src', imagens[i]).fadeIn(100);
  });
  
  i++;
}

 

[estrellainfo 0]

Boa tarde,

 

Quero igual este JSFiddle, legal, vou pegar imagens de alta qualidade e colocar para fazer isso.

 

Minha idéia é fazer isso ,

entre neste site

http://www.robertomigotto.com.br/

quero fazer um menu diferente, porem com o mesmo jeito, transparente e o fundo rotativo .

 

Obrigado pelas dicas...

Farei alguns testes e vou falando...

[L. Henrique 179]

Estrellainfo,

Para que consiga efetuar o mesmo efeito, você pode alterar os valores de fadeIn e fadeOut do jQuery no fiddle que te passei. Troque os valores "100" por 500 ou 800.

Existe um valor como 3000, ele é o intervalo, ou seja, a cada 3 segundos ele muda a imagem.

Para o menu, você deve utilizar o background: rgba(); - como no exemplo que deixarei abaixo:

.suaclasse {
   background: rgba(156, 35, 78, 0.5);
}

Onde 0.5 é a opacidade da soma dos valores de Red (156), Green (35) e Blue (78).

 

 

[estrellainfo 0]

Fala L Henrique, ficou legal o menu , fui alterando os valores e ficou bom .

Obrigado por enquanto.

[L. Henrique 179]

Estrellainfo, se conseguiu resolver sua dúvida, considere colocar o tópico como resolvido. Isso ajuda a outros usuários que possuem a mesma dúvida a acharem soluções.

Abraços!

[estrellainfo 0]

L Henrique,

 

criei o menu com uma linha.

como faço para adicionar nova linha

menu ficar com 2 linhas ?

Obrigado

[L. Henrique 179]

Estrellainfo,

Teria como especificar um pouco mais a sua dúvida? Eu posso considerar essa linha como um border ou como um item a mais no menu.

Poderia publicar o código do seu menu no JSFiddle?

[estrellainfo 0]

O codigo eu fui deletando porque nao estava dando certo.

Eu até conseguir fazer um pouco parecido com isso.

O que não estou conseguindo fazer é deixar varios menus links.

entre aqui para voce ter uma noção.

http://www.robertomigotto.com.br/

neste link tem menu de 1 linha .

quero fazer com 2 linhas . uma em cima e outra em baixo .

isso que é a minha duvida por enquanto.

Obrigado

[L. Henrique 179]

Estrellainfo,

Como eu já te respondi via facebook, vou deixar a resposta aqui caso algum usuário tenha a mesma dúvida. Pra fazer duas linhas de menu, é só adicionar uma nav fora da primeira nav.

Ex.:

<nav id="menu1" class="menu">
   ...
</nav>
<nav id="menu2" class="menu">
   ...
</nav>