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
DESTAQUESMais compartilhados
Comentários
Continue lendo
    AINDA NÃO SE INSCREVEU?

    Vem ver os vídeos legais que
    estamos produzindo no Youtube.