Entsättigungseffekt mit jQuery und Pixastic

Question

Weiß jemand, wie man das Pixastic-Plugin und jQuery zu verwenden, wo ich ein Bild von Farbe zu vollständig entsättigt verblassen lassen könnte?

Ich versuche zu vermeiden, zwei Bilder zu speichern und eines auszublenden.

Answer 1

Ich habe das Gegenteil gemacht... entsättigte Bilder in Farbe einblenden lassen. erreicht mit nur 1 Bild in Verbindung mit pixastic und livequery. ich habe im Grunde die Bilder geklont, eine der Kopien entsättigt und sie übereinander gestapelt.... die oberste (entsättigte) Ebene beim Hovern ausgeblendet. ich bin mir sicher, dass es eleganter sein könnte, aber es funktioniert größtenteils. du kannst den Effekt sehen unter chicagointerhandball.org auf allen "Sponsoren"-Logos

$('.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 2

Da all diese pixastischen Bildeffekte im laufenden Betrieb generiert werden, halte ich es nicht für machbar, zwischen gesättigt und entsättigt zu wechseln. Der Sättigungsgrad des Bildes müsste bei jedem Schritt der Überblendung neu gezeichnet werden. Am besten wäre es wohl, zwei Bilder, ein gesättigtes und ein ungesättigtes, übereinander zu legen. Wenn Sie dann mit dem Mauszeiger über eines der Bilder fahren, wird das andere eingeblendet.

編集する。

Ich habe gerade gesehen, dass Sie versuchen, zwei Bilder zu vermeiden. Nun, das ist die einzige Lösung, die mir einfällt, aber ich würde gerne sehen, ob es noch andere gibt. Je nachdem, wie viele Bilder es gibt, könnten Sie alle entsättigten Bilder beim Laden der Seite generieren, sie über den gesättigten Bildern platzieren, sie ausblenden und sie dann beim Hovern einblenden. Nur eine Möglichkeit.

Answer 3

Können Sie das Beste aus beiden Welten herausholen, indem Sie dynamisch eine Duplikation erstellen und dieses Bild mit pixastic entsättigen. Positionieren Sie das neue entsättigte Bild unter dem Original und blenden Sie das Original aus.

Answer 4

Sie sollten dazu in der Lage sein, es steht in ihrem Abschnitt zur jQuery-Dokumentation .

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

Answer 5

Sieht aus wie dies ist möglich mit dem Canvas-Element.