Oi! Tudo bom? Nesta quarta parte da coluna sobre Efeitos em Links, continuaremos vendo os efeitos de transição que foram criados pela Microsoft. Note que na maioria dos efeitos há os atributos Para ver um exemplo de como os efeitos funcionam, clique aqui.

Se você ainda não leu a coluna anterior, por favor leia. Nela há mais detalhes sobre estes efeitos.

Atenção: Na maioria dos efeitos da coluna anterior e nesta, há os atributos: Duration e Enabled.

. Duration é o tempo da transição. Nele você deve colocar o valor que você quer que dure o efeito.
. Enabled indica se o efeito deve ser exibido (true) ou não (false), não é necessário colocar este atributo pois em todos os efeitos o valor enabled=true é padrão (default).

Pixelate

O efeito Pixelate faz com que o link, na transição, fique com quadrados (pixels). Ele tem três atributos: Duration, Enabled e maxSquare. MaxSquare indica a largura do quadrado (pixel).

Exemplo:

RadialWipe

O efeito RadialWipe se assemelha a uma palheta do pára brisa. Ele tem três atributos: Duration, Enabled e WipeStyle.

. WipeStyle indica como será o efeito, ele tem três propriedades: CLOCK (o efeito começa do meio, no sentido horário, como um relógio), WEDGE (o efeito começa do meio e se entende para as laterais) e RADIAL (o efeito começa no alto ao lado esquerdo e termina no canto esquerdo superior).

Exemplo:

RandomBars

No efeito RandomBars a transição expõe linhas aleatórias de pixels. Ele tem três atributos: Duration, Enabled e Orientation.

. Orientation é a orientação da transição, vertical ou horizontal.

Exemplo:

RandomDissolve

No efeito RandomDissolve a transição expõe pixels aleatórios, formando o efeito de dissolução. Ele tem dois atributos: Duration e Enabled.

Exemplo:

Slide

O efeito Slide funciona como um slide, o texto desliza do lugar. Ele tem quatro atributos: Bands, Duration, Enabled e slideStyle.

. Bands ajusta o número de tiras em que o objeto é dividido durante a transição. SlideStyle indica como será o efeito: HIDE (Desliza o objeto original para fora, expondo o objeto novo.) , PUSH (desliza o objeto novo para dentro, empurrando o objeto original para fora), SWAP (alterna a troca e expõe o objeto novo e empurra o objeto original para fora, ao mesmo tempo).

Exemplo:

Spiral

O efeito spiral se assemelha a uma espiral. Ele tem quatro atributos: Duration, Enabled, gridSizeX e gridSizeY.

. GridSizeX indica o número de colunas da grade usadas para o filtro, o valor pode variar de 1 a 100. GridSizeY indica o número de linhas da grade usadas para o filtro, o valor pode variar de 1 a 100.

Exemplo:

Stretch

O efeito Stretch cria uma camada que é esticada para cobrir o objeto original. Este efeito se assemelha a um cubo que gira. Ele possui três atributos: Duration, Enabled e stretchStyle.

. StretchStyle indica como será o efeito: HIDE (estica o novo objeto até o objeto original da esquerda para a direita), PUSH (estica o objeto novo para dentro e espreme o objeto original para fora, movendo-se da esquerda para a direita, este movimento assemelha-se a um cubo que gira), SPIN (estica o novo original até ele sobrepor o objeto original do centro para fora).

Exemplo:

Strips

O efeito Strips cria na transição um novo objeto e move tiras sucessivas, como uma serra diagonal que passa através do objeto original. Ele possui três atributos: Duration, Enabled e Motion.

. Motion define como será a transição das tiras: leftup (do canto esquerdo superior à direita mais baixa), leftdown (do canto esquerdo mais baixo à direita da parte superior), rightdown (do canto direito superior ao esquerda mais baixo), rightup (do canto direito mais baixo à parte superior à esquerda).

Exemplo:

Wheel

O efeito Wheel se assemelha aos raios de uma roda girando. Ele possui três atributos: Duration, Enabled e Spokes.

. Spokes indica o número de voltas (raios) que o efeito tem, o padrão é 4, mas o valor pode variar entre 2 a 20.

Exemplo:

Zigzag

O efeito Zigzag é um zigzag que começa de cima pra baixo. Ele possui quatro atributos: Duration, Enabled, GridSizeX e GridSizeY.

. GridSizeX indica o número de colunas da grade usadas para o filtro, o valor pode variar de 1 a 100. GridSizeY indica o número de linhas da grade usadas para o filtro, ovalor pode variar de 1 a 100.

Exemplo:

Não se esqueça que o arquivo efeito.htc (criado na coluna anterior) deve estar na mesma pasta que a página ou arquivo externo que contêm o efeito de transição.

Obrigada pelo e-mails, ultimamente não estou tendo muito tempo para respondê-los, mas mesmo atrasada eu respondo todos. =) Até semana que vem!