Além das diversas funcionalidades que o jQuery nos proporciona ele conta com vários plugins, acredito que seja por isso que ele se tornou tão interessante como é hoje.

Um desses plugins é o InnerFade, que é capaz de criar transições de elementos css, podemos arrumar diversas utilidades pra isso, irei mostrar como criar um banner de transição de imagens.

Resposta:

O uso do plugin é muito simples, basta fazer uma simples configuração. Caso você não conheça o jQuery, aconselho a olhar nossas lições básicas de jQuery.

Javascript:

$('elemento').innerfade({         
          animationtype: //Tipo da animação 'fade' ou 'slide' (Default: 'fade'),         
          speed: //Velocidade do efeito em ms ou usando as palavras chaves (slow, normal ou fast) (Default: 'normal'),
          timeout: //Tempo entre os efeitos em ms (Default: '2000'),
          type: //Tipo do  slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence'),      
          containerheight: //Altura do container em qualquer especificação de altura css (Default: 'auto'),      
          runningclass: //Classe css o qual o container irá ser aplicado (Default: 'innerfade')
 });

Configurando o innerfade para nosso banner de transição

Javascript:

$(document).ready(
                                function(){                    
                                        $('ul#slide').innerfade({
                                                speed: 1000,
                                                timeout: 3000,
                                                type: 'sequence',
                                                containerheight: '240px'
                                        });                                    
                        });

Corpo da nossa página

HTML:

<body>                                 
                                <h3>As melhores coisas da vida</h3>
                                <ul id="slide">                                
                                        <li>
                                                <a href="http://www.soucafecomleite.com.br"><img src="1.jpg"  /></a>
                                        </li>
                                        <li>
                                                <a href="http://www.soucafecomleite.com.br"><img src="2.jpg"  /></a>
                                        </li>                                  
                                        <li>
                                                <a href="http://www.soucafecomleite.com.br"><img src="3.jpg"  /></a>
                                        </li>                                  
                                        <li>
                                                <a href="http://www.soucafecomleite.com.br"><img src="4.jpg"  /></a>
                                        </li>          
                                </ul>                                                  
        </body>

Não se esqueça de que devemos adicionar os scripts, no caso o jquery e o plugin innerfade.

HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script type="text/javascript" src="jquery.innerfade.js"></script>

Página de teste: clique aqui

Tags: css, design, javascript, jquery
7 comentários Envie um trackback

Endereço de trackback para este post

Trackback URL (clique direito e copie atalho/localização do link)

7 comentários

Comentário de: Tácio Andrade [Visitante]
O Jquerry é muito bom mesmo......
xD

To aprendendo a mecher com ele a pouco mais de 1 mes e ja vi muita coisa que ele pode fazer......


xD
10.12.08 @ 07:43
Comentário de: Augusto cesar [Visitante]
E ai galera.Sou novo por aqui, to me quebrando um pouco no site do jquery. Quero colocar aquele background transition plugin, mas quando abro o codigo, nao sei em qual linha colocar as imagens.
Sera que alguem ai pode me dar uma mao?
Me add no msn. augusto_rossana@hotmail.com

Ae, valeu
27.03.09 @ 10:25
Comentário de: Rodrigo Gregorio [Visitante]
detalhes em http://medienfreunde.com/lab/innerfade/

jquery banner animação noticias imagem
07.04.09 @ 13:22
Comentário de: Andre [Visitante]
consegui fazer o efeito, mas como eu faço pra utilizar um texto em volta da imagem?
17.06.09 @ 15:39
Comentário de: Weider [Visitante]
Muito Obrigado!
Era exatamente o que eu estava procurando, passei por vários sites, mas só aqui eu encontrei...
Valew mesmo...
10.07.09 @ 07:56
Comentário de: Victor [Visitante]
Como fazer para posicionar a imagem ao canto, toda vez que instalo o script, a imagem fica fora da tabela em que posicionei. Me ajudem HEELLLLLP !!!!!!!!!!
12.10.09 @ 07:20
Comentário de: Daniel [Visitante] Email
Ola pessoal sou novo nesse site estou me aventurando agora no jquery estou utilizando, em uma home, 2 jquery mas não estou conseguindo fazer os 2 funcionar ao mesmo tempo quando retiro a script type de um funciona o outro e vice versa, será que alguem pode me ajudar, valeu.
13.12.09 @ 05:21

Esse post tem 1 feedback esperando moderação...

Deixe seu comentário


Seu endereço de e-mail não será revelado nesse site.

Sua URL será exibida.
(Quebras de linha se tornam <br />)
(Nome, e-mail & website)
(Permitir que usuários o contatem através de um formulário eletrônico (seu e-mail não será exibido.))