Effet de désaturation avec jQuery et Pixastic

Question

Est-ce que quelqu'un sait comment utiliser le plugin Pixastic et jQuery à l'endroit où je pourrais avoir une image fondu de couleur complètement désaturée?

J'essaie d'éviter d'enregistrer sur deux images et à la décoloration un sur ..

Answer 1

Ressemble à this is possible avec l'élément canvas.

Answer 2

Vous devriez pouvoir, il est dans leur jQuery documentation section.

// convert all images with class="photo" to greyscale 
$(".photo").pixastic("desaturate"); 

Answer 3

Étant donné que tous ces effets d'image pixastic sont générés à la volée, je ne pense pas qu'il serait possible de disparaître entre les gras saturés et désaturée. Le niveau de saturation de l'image devrait être redessiné à chaque étape du fondu. Votre meilleur pari serait probablement d'avoir deux images, une saturée et une désaturée, et les a placées les unes sur les autres. Ensuite, lorsque vous passez la souris sur l'un d'entre eux, effacez l'autre image.

Edit:

Je viens de voir que vous essayez d'éviter d'avoir deux images. Eh bien, c'est la seule solution à laquelle je puisse penser, mais j'aimerais voir s'il y en a d'autres. En fonction du nombre d'images, vous pouvez générer toutes les images désaturées au chargement de la page, les placer sur des images saturées, les masquer, puis les fondre en vol stationnaire. Juste une possibilité.

Answer 4

vous pourriez obtenir le meilleur des deux mondes en créant dynamiquement une duplication et en désaturant cette image avec pixastic. Placez la nouvelle image désaturée sous l'original et décollez l'original.

Answer 5

J'ai fait l'inverse ... avoir des images désaturées fondre en couleur. réalisé avec seulement 1 image en conjonction avec pixastic et livequery. J'ai essentiellement cloné les images, désaturé l'une des copies, et les empilées les unes sur les autres .... en décolorant la couche supérieure (désaturé) en vol stationnaire. Je suis sûr que ça pourrait être plus élégant, mais ça marche surtout. vous pouvez voir l'effet à chicagointerhandball.org sur tous les logos « sponsor »

$('.sponsors').load(function() {  
    $('.sponsors').pixastic("desaturate"); 
}).each(function(index) { 
    var clone = $(this).clone().removeClass('sponsors').addClass('sponsors-color').css('opacity',.25); 
    $(this).parent().append(clone); 
}); 

$('.sponsors-color').livequery(function(){ 
    // use the helper function hover to bind a mouseover and mouseout event 
     $(this).hover(function() { 
       $(this).stop().animate({"opacity": 1}); 
      }, function() { 
       $(this).stop().animate({"opacity": 0}); 
      }); 
    }, function() { 
     // unbind the mouseover and mouseout events 
     $(this) 
      .unbind('mouseover') 
      .unbind('mouseout'); 
    }); 

Answer 6

Avec cela, vous devez mélanger jQuery et les appels DOM standard. J'ai eu le même problème juste aujourd'hui à ce sujet. Je n'ai pas réussi à faire fonctionner le hover à travers la plate-forme à partir des exemples donnés ici et sur leur site. J'ai donc décidé de penser par moi-même sur celui-ci. Entré une solution, espérons que cela fonctionne pour vous:

http://you.arenot.me/2012/03/26/pixastic-desaturate-on-mouseover-mouseenter-mouseleave/