Olá pessoal! Nesta terceira parte da coluna sobre Efeitos em Links, veremos efeitos de transição que foram criados pela Microsoft e como tal funcionam apenas no Internet Explorer 5.5 ou superior. Alguns efeitos funcionam no IE 4.0 porém a maioria funciona apenas nos navegadores a partir da versão 5.5.
Como as propriedades explicadas nas colunas anteriores, os efeitos podem ser utilizados em imagens, textos e páginas. Darei exemplos disto em outra coluna. Para ver como os efeitos funcionam, pode fazer download do arquivo .ZIP com todos os exemplos.
Para todos os efeitos utilizaremos um código java script que chama o efeito de transição e faz com que ele funcione.
Você deve salvar o código abaixo como efeito.htc ou fazer o download dele clicando aqui.
Aviso: Os exemplos destes efeitos são diferentes dos anteriormente vistos. Não trabalhamos mais com a:active, a:hover, a:link, a:visited. Apenas com a e a:hover. Não é necessário utilizar os outros, fica como opção sua. A tag agora ganha um estilo e é nele que você deve colocar o efeito, como você verá nos exemplos.
Nos efeitos abaixo você verá o atributo "enabled", não é necessário colocá-lo. Todos os efeitos têm o valor enabled=true como padrão (default).
É necessário colocar a propriedade "height" para que o efeito funcione. Nos exemplos ele já está incluso.
Barn
O efeito Barn é o efeito de transição que se assemelha ao abrir e fechar de portas. Ele tem quatro atributos: Duration, Enabled, Motion e Orientation.
Duration é o tempo da transição. Enabled indica se o efeito deve ser exibido (true) ou não (false). Motion indica se a transição deve começar de dentro pra fora (in) ou de fora pra dentro (out). Orientation é a orientação da transição, lateral ou horizontal.
Exemplo:
Blinds
O efeito Blinds, é o efeito de transição que se assemelha ao abrir e fechar de cortinas. Ele tem quatro atributos: Bands, Direction, Duration e Enabled.
Bands indica o número de tiras em que o objeto é dividido durante a transição. Direction é a direção do efeito (up, down, left ou right). Duration é a duração do efeito. Enabled indica se o efeito deve ser exibido (true) ou não (false).
Exemplo:
CheckerBoard
No efeito CheckerBoard, a transição é como um tabuleiro de damas. Ele tem três atributos: SquaresX, SquaresY e Direction.
Direction é a direção do efeito. SquaresX indica quantas colunas o tabuleiro terá. SquaresY indica quantas linhas o tabuleiro terá.
Exemplo:
Fade
No efeito Fade, a transição faz com que o objeto vá desvanecendo. Ele tem três atributos: Duraton, Enabled e Overlap.
Duration é o tempo de duração do efeito. Enabled indica se o efeito deve ser exibido (true) ou não (false). Overlap indica a fração da duração da transição.
Exemplo:
Gradient Wipe
No efeito Gradient Wipe, durante a transição passa uma faixa de gradiente no objeto. Ele tem quatro atributos: Duration, Enabled, gradientSize e Motion.
Duration é a duração da transição. Enabled indica se o efeito deve ser exibido (true) ou não (false). grandientSize indica a porcentagem do objeto que é coberto pela faixa do gradiente. Motion indica o sentido da transição, para frente (forward) ou reverso (reverse).
Exemplo:
Inset
No efeito Inset a transição ocorre
diagonalmente. Ele possui dois atributos: Duration e Enabled.
Como já vimos, Duration é
a duração do efeito e Enabled
indica se o efeito deve ser exibido (true) ou não
(false).
Exemplo:
Iris
O efeito Iris é similar à abertura de uma câmera. Ele possui quatro atributos: Duration, Enabled, irisStyle e Motion.
Duration é a duração do efeito. Enabled indica se o efeito deve ser exibido (true) ou não (false). IrisStyle indica como será o efeito da Iris que pode ser diamond, circle, cross x, plus, square ou star. Motion indica se a transição deve começar de dentro pra fora (in) ou de fora pra dentro (out).
Exemplo:
Caso não funcionar:
- Verifique
se seu navegador é o Internet Explorer 5.5 ou superior.
Para isto abra o navegador e clique no menu Ajuda > Sobre o
Internet Explorer.
- Verifique
se o arquivo efeito.htc está no mesmo diretório
que o código (página ou arquivo externo do css).
- Verifique
se você colocou o código no lugar certo, entre as
tags
Na próxima semana continuarei explicando
outros efeitos. Espero que tenha gostado.
Até semana que vem!
2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.