Quarta-feira, 13 de agosto de 2003 às 01h00

Efeitos em links - Parte 03

Faltam 0 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

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 .
- Verifique no código se dentro do estilo da tag a tem height: 1px. Se não houver, coloque.

Na próxima semana continuarei explicando outros efeitos. Espero que tenha gostado.
Até semana que vem!

Nenhum comentário até agora

Cancelar resposta

Qual a sua opinião?

Faça login abaixo ou cadastre-se rapidamente.


Sobre o Autor
Mariana Frioli é responsável pela criação no desenvolvimento web da Universidade Paulista.

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.