16 de mar de 2011

Exclusivo! Efeito de escala cinza nas imagens do seu site ou blog!

      Antes, imagens em tons de cinza deviam ser convertidas manualmente, para serem exibidas na web.Agora com o HTML5, as imagens podem ser manipuladas em escala de cinza, sem ter a necessidade do uso de um software de edição de imagens. Econtrei uma demo para mostrar a você como usar HTML5 e jQuery dinamicamente com o clone imagens coloridas em tons de cinza (ver demo )

O propósito

Este tutorial buscará mostrar-lhe como fazer uma escala de cinza / efeito hover cor usando imagens com HTML5 e jQuery. Para conseguir esse efeito antes do HTML5, duas imagens eram necessárias: uma colorida e uma em tons de cinza. Agora HTML 5 tornou mais fácil e mais rápido porque a imagem em tons de cinza é gerada a partir da imagem original. Eu espero que você vai eche este script muito útil no seu design como vitrine portfólio, galeria de fotos, etc...

screenshot de demonstração

Código jQuery


O código abaixo jQuery vai apontar para as imagens principais e gerar uma versão em tons de cinza. Quando passar o mouse por cima da imagem, ela vai perderá os tons de cinza e mostrará a imagem colorida.

<script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> // On window load. This waits until images have loaded which is essential $(window).load(function(){ // Fade in images so there isn't a color "pop" document load and then on window load $(".item img").fadeIn(500); // clone image $('.item img').each(function(){ var el = $(this); el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){ var el = $(this); el.parent().css({"width":this.width,"height":this.height}); el.dequeue(); }); this.src = grayscale(this.src); }); // Fade image $('.item img').mouseover(function(){ $(this).parent().find('img:first').stop().animate({opacity:1}, 1000); }) $('.img_grayscale').mouseout(function(){ $(this).stop().animate({opacity:0}, 1000); }); }); // Grayscale w canvas method function grayscale(src){ var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var imgObj = new Image(); imgObj.src = src; canvas.width = imgObj.width; canvas.height = imgObj.height; ctx.drawImage(imgObj, 0, 0); var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); for(var y = 0; y < imgPixels.height; y++){ for(var x = 0; x < imgPixels.width; x++){ var i = (y * 4) * imgPixels.width + x * 4; var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; imgPixels.data[i] = avg; imgPixels.data[i + 1] = avg; imgPixels.data[i + 2] = avg; } } ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); return canvas.toDataURL(); } </script>

Como utilizá-lo

Para aplicar o script ao seu site:
  • Insira o link de uma cópia do jquery.js
  • cole o código como mostrado acima
  • Defina a imagem de destino (por exemplo: .post-img , img , .gallery img , etc)
  • Você pode mudar a velocidade da animação (ou seja, 1000 = 1 segundo)
screenshot código

Compatibilidade

    Ele funciona com qualquer navegador que tenha suporte a HTML 5 e Javascript, como o Chrome, Safari e Firefox. Se HTML5 não é suportado, ele reserva para a imagem da cor original. Nota: se ele não funciona com o Firefox e o instalados Chrome localmente. Você precisará colocar o arquivo HTML em um servidor web.


Espero que tenham gostado! Até a próxima e deixem seus comentários!

O Javascript e HTML 5 em escala de cinza foi codificado por Darcy Clarke . Créditos pelo tutorial a WebDesignerWall.com

Compartilhe essa postagem!
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

Recomendamos para você »

1 comentários

  1. A vida mudou com o HTML 5 e Css 3, porém é algo que irá demorar para se torna padrão. Já que navegadores, alguns como o "amado" IE não funfa. =S

    ResponderExcluir

Seja livre para expor seu pensamento!

Se preferir, antes, leia nossas regras para comentários...
(Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!)
Bom comentário!

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Pré-Designed by BlogThietKe Designed by @Mundo_Informal
© 2012-2014 .::Mundo Informal::. Todos os direitos Reservados
Licença Creative Commons
...See you!
Voltar ao topo