Reflexo em imagem com javascript

Novo aqui no site? Talvez gostaria de assinar o
RSS feed do site?

Publicado em: 09/05/2008
Área: JavaScript
Visualizações: 2.203
Comentário(s): 0

imprimir envie por e-mail compartilhe
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

veja mais
Preencha o formulário para comentar:
Nome:*

E-mail:* (não será exibido)

Site: (http://)

Comentário:*

Deseja receber os comentários no e-mail?

Anti-spam: (nova imagem)





Seja o primeiro a comentar!

Autor da matéria
Nícolas Müller
Sou um profissional da área de internet, trabalho como programador, designer e desenvolvedor de sites, faz cerca de 8 anos que estou atuando na área , sendo 5 .

Todas as matérias de Nícolas Müller

Publicidade
Seguir o Oficina da Net
RSS

RSS

RSS
Top matérias do mês
Matérias relacionadas
Tags

© 2005 - 2009 - Oficina da Net - v 4.0 - É proibida a reprodução parcial ou completa do conteúdo deste site sem autorização por escrito. Resolução adequada: 1024x768px.