Reflexo em imagem com javascript

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

Por | @nmuller99 Programação

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:
Reflexo em imagem com javascript

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

<script type="text/javascript" src="reflection/reflection.js"></script>
<img itemprop="image" class="lazy" src="1.png" class="reflect rheight50" alt="" />
<img itemprop="image" class="lazy" src="2.png" class="reflect rheight50" alt="" />
<img itemprop="image" class="lazy" src="3.png" class="reflect rheight50" alt="" />
<img itemprop="image" class="lazy" 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.

Mais sobre: javascript js design
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo