Буксировочное размытие?

Question

Можно ли применить ослабление к пиксельной функции blurfast?

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

Я сейчас делаю это (с помощью JQuery):

$(".bg").pixastic("blurfast", {amount:1}); 

Который работает отлично для размывания, но это происходит мгновенно. Возможно ли, чтобы этот эффект затухал с каким-то ослаблением?

Я сделал этот эффект раньше во Flash, но это моя первая попытка в javascript.

Я открыт для использования другой JS библиотеку, если это возможно, в чем-то другом, чем pixastic

Благодаря

Answer 1

Возможно ли это? Конечно.

Так же, как можно упростить практически любое числовое значение ... проблема в том, что pixastic не поддерживает поддержку, так что вы смотрите на создание функции ослабления самостоятельно, что довольно просто.

Как только у вас есть функция ослабления, которую я не собираюсь писать для вас, поскольку есть множество функций ослабления, и я понятия не имею, какой тип эффекта вы ищете), просто подайте полученное размытие значение в пиксели.

, например, создать такую ​​функцию:

function myEasingFunc(percent){ 

    // Your easing code here 

    return result; 
} 

Затем вызовите эту функцию несколько раз с инкрементируется значений процента:

for(i==0;i<100;i++){ 
    var amount=myEasingFunc(i); 
    $("#myimage").pixastic("blurfast", {amount:amount}); 
} 

Очевидно, что это не было бы, что бы вы непосредственно хотите, так как нет никакой задержки между этапами и 100 шагов с шагом в 1% каждый является расточительным, но он иллюстрирует этот процесс.

Варианты продолжаются и продолжают ... скорее, чтобы сделать процент размытия в зависимости от времени, как вы думаете, вы также можете использовать его на основе позиции текста, который летает в окно из-за пределов зрения, просто как один пример.

Я не знаю, если это то, что вы ищете, но я надеюсь, что это поможет кому-то, независимо.

Answer 2

подход мы используем это что-то вроде этого:

var wrap = $(parent_element); 
var img = wrap.find('.img-to-blur'); 
var canvas = img.clone().addClass('blur').css('opacity', '').prependTo(wrap); 

img.fadeOut(); 
canvas.fadeIn(); 

Приятно процессора, чем перерасчет каждого уровня размытия в JavaScript.

УВЕДОМЛЕНИЕ: код является скорее псевдокодом, это может быть не CTRL + INSERT & SHIFT + INSERT ready.