Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá bom dia,
Gostaria de uma opinião de vcs como fazer a seguinte animação....
Estou montando um hotsite, onde temos um slideshow de fotos e o restante do site o html normal com texto e tal... só que com fundos de cores diferentes.
Assim que cada foto que aparece no slide muda todo a cor do site... sei q tem n maneiras para fazer q andei pesquisando na Internet, mas queria um Help de como começar... se alguém já fez e pode passar um exemplo...
bom é isso..obrigada!!
Por enquanto fiz assim o script, mto simples. Usando Jquery Cycle
HTML
<div class="slider" id="fotos">
<img src="_img/slide.png" height="448" width="630"/>
<img src="_img/slide.png" height="448" width="630"/>
<img src="_img/slide.png" height="448" width="630"/>
</div>JAVASCRIPT
$('#fotos')
.cycle({
fx: 'fade',
speed: 1000,
timeout: 5000,
pager: '#nav'
});
$(function(){
$('#fotos')
.cycle({
fx: 'fade',
speed: 1000,
timeout: 5000,
pager: '#nav'
},function(){
// aqui você coloca o que quer fazer logo fotos.
alert('Teste');
});
});Veja se resolve seu problema
Assim Bru, a dificuldade é o seguinte....
Como vou alinhar as fotos que aparece no cycle, mudando o fundo do site.
Por exemplo...
Quando aparecer no slide a foto 1 a div tal tem a cor preta
Quando aparecer no slide a foto 2 a div tal tem a cor laranja...
e por ai vaiii....
:(!!
Faz assim então,
verifica de qtos em qtos segundos o cycle ta agindo,
e faz outro cycle porém para o body com as mesmas características, assim eles irão funcionar JUNTOS!
>
Faz assim então,
verifica de qtos em qtos segundos o cycle ta agindo,
e faz outro cycle porém para o body com as mesmas características, assim eles irão funcionar JUNTOS!
Fiz da maneira que você comentou e está dando certo... só a única dificuldade eh alinhar o CSS
tenho q colocar uma position:absolut para q o conteúdo fique em cima do bkg... mais ou menos por ai neh?!
Mto Obrigada!!
Acho que não vai precisar não, pois o BG do body sempre vai ficar em baixo.
você não precisar criar outra DIV para isso.
Não sei como você fez ai, ou também tenta utilizar o z-index no CSS assim:
#suaDiv {
z-index:-9999;
}Não costumo utilizar ele, mais acho que vai funcionar !
>
Acho que não vai precisar não, pois o BG do body sempre vai ficar em baixo.
você não precisar criar outra DIV para isso.
Não sei como você fez ai, ou também tenta utilizar o z-index no CSS assim:
#suaDiv {
z-index:-9999;
}Não costumo utilizar ele, mais acho que vai funcionar !
Para te falar a verdade eu não fiz a animação no BODY...
Coloquei dentro de uma DIV .CONTENT
HTML
>
<div class="content">
<img src="_img/bkg-home-vermelho.png" class="bgM"/>
<img src="_img/bkg-home-laranja.png" class="bgM"/>
<img src="_img/bkg-home-rosa.png" class="bgM"/>
<img src="_img/bkg-home-roxo.png" class="bgM"/>
</div><!-- div content -->CSS
.content,img.bgM {
border:1px solid red;
min-height: 820px;
min-width: 1070px;
width: 1070px;
height: 820px;
position:fixed;
top: 0;
left: 0;
z-index:-9999;
}e ai coloquei todo o conteúdo dentro de uma outra div .WRAP
e essa div estou tentando alinhar o conteudo na div .CONTENT
=D!
entendi, então usa as POSITIONS do CSS e veja se resolve.
>
entendi, então usa as POSITIONS do CSS e veja se resolve.
Quero te agradecer pela ajuda!! Deu tudo certo!!
Mto obrigada!!
Poste o script que faz a troca de imagens.