Oficina da Net

Fonte de ícones - Confira o novo ÍCONES BR.

Reflexo em imagem com javascript

Publicado em: 09/05/2008 | JavaScript | Visualizações: 809 | 0 Comentário(s)

Olá caro leitor. Vou demonstrar hoje um efeito muito útil para todos os desenvolvedores. Este efeito é muito utilizado em design e por muitos talvez difícil de ser feito. Agora vou demonstrar como fazer ele utilizando javascript, isto mesmo, com javascript será possível fazer este efeito. Encontrei na internet um JS que faz todo o trabalho.

O resultado do efeito é este:

O código para você utilizar e criar este efeito é:



<script type="text/javascript" src="reflection/reflection.js"></script>

<img src="1.png" class="reflect rheight50" alt="" />

<img src="2.png" class="reflect rheight50" alt="" />

<img src="3.png" class="reflect rheight50" alt="" />

<img src="4.png" class="reflect rheight50" alt="" />

E o reflexo de fundo pode ser em qualquer cor, vai depender da cor de fundo de sua imagem, caso seja gif ou png você poderá fazer com varias cores de fundo devido ao fato de a imagem poder ser transparente o fundo.

Você apenas indica uma classe na imagem que faz o reflexo, para alterar a altura do reflexo basta trocar o rheight50 para rheightxxx.

Abaixo está o arquivo zipado com todo o material para você estudar e testar.

Arquivo anexo: Clique aqui para download

Links patrocinados