Обесцвечивать эффект с помощью jQuery и Pixastic

Question

Кто-нибудь знает, как использовать плагин Pixastic и jQuery там, где я могу получить изображение от цветного до полностью ненасыщенного?

Я пытаюсь избежать сохранения двух изображений и выцветания одного ..

Answer 1

Я сделал обратное ... с ненасыщенными изображениями, чтобы окрасить. достигнуто только с 1 изображением в сочетании с пиксельным и живым запросом. я в основном клонировал изображения, ненасыщенный один из экземпляров, и сложил их друг на друга .... исчезая верхний (ненасыщенный) слой при наведении. Я уверен, что это может быть более элегантно, но в основном это работает. Вы можете увидеть эффект на chicagointerhandball.org на всех логотипах спонсоров

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

Вы можете получить лучшее из обоих миров, динамически создавая дублирование и обесцвечивая это изображение с pixastic. Поместите новое ненасыщенное изображение под оригинал и затемните оригинал.

Answer 3

Поскольку все эти эффекты пиксельного изображения генерируются на лету, я не думаю, что было бы целесообразно переходить между насыщенным и ненасыщенным. Уровень насыщенности изображения должен был бы перерисовываться на каждом этапе исчезновения. Лучше всего было бы иметь два изображения, одно насыщенное и одно ненасыщенное, и размещать их друг над другом. Затем, когда вы наводите курсор мыши на одно изображение, исчезаете другое изображение.

Edit:

Только что увидел, что вы пытались избежать двух изображений. Ну, это единственное решение, которое я могу придумать, но я бы хотел увидеть, были ли другие. В зависимости от количества изображений вы можете сгенерировать все ненасыщенные изображения при загрузке страницы, поместить их поверх насыщенных изображений, спрятать их, а затем добавить их при наведении. Просто возможность.

Answer 4

При этом вам нужно смешать jQuery и стандартные вызовы DOM.У меня была такая же проблема только сегодня об этом.Я не мог заставить зависание работать кроссплатформенно из примеров, приведенных здесь и на их сайте.Поэтому я решил подумать об этом.Придумали решение, надеюсь, оно вам подойдет:

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

Answer 5

Похоже, это возможно с элементом canvas.

Answer 6

Вы должны быть в состоянии, это в их разделе документации jQuery .

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