Como criar um cross-fading imagens em páginas html

Um efeito como o cross-fade entre imagens em Flash é simples de criar, torna-se um pouco "menos óbvia quando quiser reproduzi-lo em uma página html.
Felizmente, não está nunca existe alguém que pensa que temos diante de nós!

Image Cross Fader Redux CSS JavaScript é uma combinação que torna esta, e implementá-la em uma página da web é fácil:

1. ligue para o arquivo. js e. css em HEAD tags, como de costume;
2. de todas as imagens que estão em seqüência esmorecer em uma DIV com id = "imageContainer";
3. alterar o arquivo xfade2.css o valor de altura para se adequar às imagens que usam.

link: http://slayeroffice.com/code/imageCrossFade/xfade2.html

Objetos análogas

1. Ampliação de imagens em páginas da Web
2. Lightbox, Lightwindow
3. Criando botões com capotamento
4. DVD slideshow GUI
5. Grattacapi de fotolitista

Links patrocinados:

Se você gostou semper artigo é um comentário bem-vindos! Se quiser receber as últimas notícias do meu blog você também pode se inscrever nos RSS feeds (não pagantes). Até mesmo por e-mail. OLÁ!

3 Comentários sobre "Como criar um cross-fading imagens em páginas html"

1. Opera 9.25 Windows XP
   Fabio escreve:
   26 de dezembro de 2007, 14:16

   Bella, eu usei isso no meu blog. O resultado você pode encontrar aqui http://www.girandoilmondo.it/o.....n-campagna

   O problema agora é outro.

   Se além de uma série de fotos, eu quis incluir outros, semper deslizante abaixo, eles não seriam exibidos. É óbvio que quando você usa o DIV todas as imagens são carregadas na memória, e riutillizzandolo ainda na mesma página html que tudo esteja em conflito.

   Existe alguma forma de ultrapassar este problema?

   
2. Mozilla Firefox 2.0.0.11 Windows XP
   Doz escreveu:
   26 de dezembro de 2007, 15:03

   Um nariz (repito: um nariz!) Dizer que uma simples alteração da função so_init () que existe no js.
   Dê a ele uma variável por escrito ...
   so_init(nomedelDIV)
   ... E ao invés de ...
   imgs = d.getElementById("imageContainer")
   Escreve ... ...
   imgs = d.getElementById(nomedelDIV)
   Por fim, a linha que chama a função fora do tirerei JS (referidas no corpo ou em outro lugar), convidando a DIV que me interessa; es.: window.attachEvent("onload",so_init("ilmioDIV"))

   
3. Opera 9.25 Windows XP
   Martin escreve:
   26 de dezembro de 2007, 21:39

   Bella-los, obrigado.
   Ultimamente tenho bastante tempo para experimentar-nos

   

Escreva um comentário