(Opcional) Selecione o elemento de conteúdo ou layout ao qual você deseja aplicar o efeito.
Última atualização em
5 de mai de 2021
Observação:
Os widgets do Spry foram substituídos pelos widgets do jQuery no Dreamweaver CC e posterior. Embora ainda possa modificar os widgets do Spry existentes na página, você não pode adicionar novos.
Visão geral dos efeitos do Spry
Efeitos do Spry são aprimoramentos visuais que podem ser aplicados a quase todo elemento de uma página HTML com o uso de JavaScript. Os efeitos são geralmente usados para realçar informações, criar transições animadas ou alterar um elemento de página visualmente por determinado período. Você pode aplicar efeitos aos elementos HTML sem necessidade de tags personalizadas adicionais.
Observação:
Para aplicar um efeito a um elemento, ele deve estar selecionado ou ter uma identificação. Se, por exemplo, você está aplicando um realce a uma tag div que não está selecionada, o div deve ter um valor válido de identificação. Se o elemento não existir, você terá que adicionar um ao código HTML.
Os efeitos podem alterar a opacidade, a escala, a posição e as propriedades de estilo de um elemento como a cor de fundo. Você pode criar efeitos visuais interessantes combinando duas ou mais propriedades.
Como esses efeitos se baseiam no Spry, quando o usuário clica em um elemento com um efeito, somente o elemento é atualizado dinamicamente, sem atualização da página HTML inteira.
O Spry inclui estes efeitos:
Aparecer/Desaparecer
Faz um elemento aparecer ou desaparecer.
Realce
Altera a cor de fundo de um elemento.
Cego
Simula uma veneziana que abre ou fecha para ocultar ou revelar o elemento.
Deslizar
Move o elemento para cima ou para baixo.
Aumentar/Diminuir
Aumenta ou reduz o tamanho do elemento.
Espalhar
Dá a impressão de que o elemento se espalha da esquerda para a direita.
Apertar
Faz o elemento desaparecer no canto superior esquerdo da página.
Observação:
Quando você usa um efeito, várias linhas de código são adicionadas ao arquivo na Visualização de código. Uma linha identifica o arquivo SpryEffects.js, que é necessário para incluir os efeitos. Não remova essa linha do código ou os efeitos não funcionarão.
Para obter uma visão geral abrangente dos efeitos disponíveis na estrutura do Spry, consulte www.adobe.com/go/learn_dw_spryeffects_br.
Aplicar um efeito Aparecer/desaparecer
Observação:
Você pode usar este efeito com qualquer elemento HTML, exceto applet, body, iframe, object, tr, tbody ou th.
-
-
No painel Comportamentos (Janela > Comportamentos), clique no botão de adição (+) e selecione Efeitos > Aparecer/Desaparecer no menu.
-
Selecione a identificação do elemento no menu do elemento de destino. Se você já selecionou um elemento, escolha <Seleção atual>.
-
Na caixa Duração do efeito, defina em milissegundos o tempo de ocorrência do efeito.
-
Selecione o efeito que deseja aplicar: Desaparecer ou Aparecer.
-
Na caixa Desaparecer de, defina a porcentagem de opacidade para quando o efeito aparecer.
-
Na caixa Desaparecer até, defina a porcentagem de opacidade para até quando o efeito desaparecer.
-
Selecione Alternar efeito se você quiser que o efeito seja reversível, passando de desaparecer para aparecer e vice-versa com cliques sucessivos.
Aplicar o efeito Persiana
Observação:
Use esse efeito somente com estes elementos HTML: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu ou pre.
-
(Opcional) Selecione o elemento de conteúdo ou layout ao qual você deseja aplicar o efeito.
-
No painel Comportamentos (Janela > Comportamentos), clique no botão de adição (+) e selecione Efeitos > Veneziana no menu.
-
Selecione a identificação do elemento no menu do elemento de destino. Se você já selecionou um elemento, escolha <Seleção atual>.
-
Na caixa Duração do efeito, defina em milissegundos o tempo de ocorrência do efeito.
-
Selecione o efeito que deseja aplicar: Ocultar ou Mostrar.
-
Na caixa Ocultar de/Mostrar de, defina o ponto inicial de rolagem do efeito como uma porcentagem ou um número pixel. Esses valores são calculados a partir da parte superior do elemento.
-
No campo Ocultar até/Mostrar até, defina o ponto final de rolagem do efeito como uma porcentagem ou um número pixel. Esses valores são calculados a partir da parte superior do elemento.
-
Selecione Alternar efeito se você quiser que o efeito seja reversível, rolando a tela para cima e para baixo com cliques sucessivos.
Aplicar um efeito Aumentar/Diminuir
Observação:
Use esse efeito com estes elementos HTML: address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu ou pre.
-
(Opcional) Selecione o elemento de conteúdo ou layout ao qual você deseja aplicar o efeito.
-
No painel Comportamentos (Janela > Comportamentos), clique no botão de adição (+) e selecione Efeitos > Aumentar/Diminuir no menu pop-up.
-
Selecione a ID do elemento no menu pop-up do elemento de destino. Se você já selecionou um elemento, escolha <Seleção atual>.
-
No campo Duração do efeito, defina em milissegundos o tempo de ocorrência do efeito.
-
Selecione o efeito que deseja aplicar: Aumentar ou Diminuir.
-
Na caixa Aumentar de/Diminuir de, defina o tamanho do elemento quando o efeito começa. Deve ser uma porcentagem do tamanho ou um valor em pixel.
-
Na caixa Aumentar até/Diminuir até, defina o tamanho do elemento quando o efeito termina. Deve ser uma porcentagem do tamanho ou um valor em pixel.
-
Se você optar por pixels para as caixas Aumentar/Diminuir de ou até, o campo de largura e altura ficará visível. Dependendo da opção escolhida, o elemento aumentará ou diminuirá proporcionalmente.
-
Indique se você deseja que o elemento aumente ou diminua no canto superior esquerdo da página ou no centro da página.
-
Selecione Alternar efeito se você quiser que o efeito seja reversível, aumentando e diminuindo com cliques sucessivos.
Aplicar um efeito Realce
Observação:
Você pode usar este efeito com qualquer elemento HTML, excetoapplet, body, frame, frameset ou noframes.
-
(Opcional) Selecione o elemento de conteúdo ou layout ao qual você deseja aplicar o efeito.
-
No painel Comportamentos (Janela > Comportamentos), clique no botão de adição (+) e selecione Efeitos > Realce no menu.
-
Selecione a identificação do elemento no menu do elemento de destino. Se você já selecionou um elemento, escolha <Seleção atual>.
-
Na caixa Duração do efeito, defina em milissegundos o tempo de duração do efeito.
-
Selecione a cor para iniciar o realce.
-
Selecione a cor para finalizar o realce. Essa cor dura somente pelo tempo definido em Duração do efeito.
-
Selecione a cor que o elemento terá depois que o realce terminar.
-
Selecione Alternar efeito se você quiser que o efeito seja reversível, alternando as cores de realce com cliques sucessivos.
Aplicar um efeito Espalhar
Observação:
Use esse efeito com estes elementos HTML: address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre outable.
-
(Opcional) Selecione o elemento de conteúdo ou layout ao qual você deseja aplicar o efeito.
-
No painel Comportamentos (Janela > Comportamentos), clique no botão de adição (+) e selecione Efeitos > Espalhar no menu.
-
Selecione a identificação do elemento no menu do elemento de destino. Se você já selecionou um elemento, escolha <Seleção atual>.
Aplicar o efeito Deslizar
Para que o efeito Deslizar funcione adequadamente, uma tag de recipiente com um ID exclusivo deve ser colocada em volta do elemento de destino. A tag de recipiente que você coloca em volta do elemento de destino deve ser uma tag blockquote, dd, form, div ou center.
A tag do elemento de destino deve ser uma das seguintes: blockquote, dd, div, form, center, table, span, input, textarea, select ou image.
-
(Opcional) Selecione a tag de recipiente do conteúdo ao qual você deseja aplicar o efeito.
-
No painel Comportamentos (Janela > Comportamentos), clique no botão de adição (+) e selecione Efeitos > Deslizar no menu.
-
Selecione a ID da tag de recipiente no menu do elemento de destino. Se o recipiente já estiver selecionado, escolha <Seleção atual>.
-
No campo Duração do efeito, defina em milissegundos o tempo de ocorrência do efeito.
-
Selecione o efeito que deseja aplicar: Deslizar para cima ou Deslizar para baixo.
-
Na caixa Deslizar para cima, defina o ponto inicial de deslizamento como uma porcentagem ou um número pixel.
-
Na caixa Deslizar para cima até, defina o ponto final de deslizamento como uma porcentagem ou um número positivo em pixel.
-
Selecione Alternar efeito se você quiser que o efeito seja reversível, deslizando a tela para cima e para baixo com cliques sucessivos.
Aplicar um efeito Apertar
Observação:
Use esse efeito somente com estes elementos HTML: address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu oupre.
-
(Opcional) Selecione o elemento de conteúdo ou layout ao qual você deseja aplicar o efeito.
-
No painel Comportamentos (Janela > Comportamentos), clique no botão de adição (+) e selecione Efeitos > Apertar no menu.
-
Selecione a identificação do elemento no menu do elemento de destino. Se você já selecionou um elemento, escolha <Seleção atual>.
Adicionar um efeito extra
Você pode associar vários comportamentos de efeitos com o mesmo elemento para produzir resultados interessantes.
-
(Opcional) Selecione o elemento de conteúdo ou layout ao qual você deseja aplicar o efeito.
-
No painel Comportamentos (Janela > Comportamentos), clique no botão de adição (+) e selecione um efeito no menu Efeitos.
-
Selecione a identificação do elemento no menu do elemento de destino. Se você já selecionou um elemento, escolha <Seleção atual>.
Excluir um efeito
Você pode remover um ou mais comportamentos de efeitos de um elemento.
-
(Opcional) Selecione o elemento de conteúdo ou layout ao qual você deseja aplicar o efeito.
-
No painel Comportamentos (Janela > Comportamentos), clique no efeito que você deseja excluir da lista de comportamentos.
-
Siga um destes procedimentos:
Clique no botão Remover evento na barra de título do subpainel (-).
Clique com o botão direito do mouse (Windows) ou pressione a tecla Control e clique (Macintosh) sobre o comportamento e selecione Excluir comportamento.
