jQuery анимированное гауссово размытие

Question

На домашней странице веб-сайта, который я разрабатываю, я бы хотел, чтобы исходное изображение героя анимировалось от размытого (гауссовского) до резкого. Я огляделся и был удивлен, что для этого не существует очевидного решения jQuery. Я что-то упустил?

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

Answer 1

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

jQuery(function ($) {
    $('#blurred_image, #focused_image').fadeToggle(1500, function () {
        //this callback function could be used to show a message or whatever else...
    });
});

Вот jsfiddle: http://jsfiddle.net/jasper/2FZ3Z/1/ (обратите внимание, что вам нужно нажать на изображение, чтобы вызвать переход от размытого к не размытому изображению).

Другим способом устранения размытия изображения может быть наложение того же изображения на себя, перемещение его на несколько пикселей и изменение его непрозрачности, чтобы пользователь мог видеть исходное изображение под ним. Затем анимируйте оверлейное изображение. Однако это больше похоже на линейное размытие, чем на гауссовское.

Вот jsfiddle: http://jsfiddle.net/jasper/FTt3b/ (щелкните изображение, чтобы анимировать размытие).

Answer 2

Проверьте эту библиотеку, она позволяет вам делать именно то, что вы ищете, не требуя дублирования изображений: http://labs.bigroomstudios.com/libraries/animo-js

Вы можете рассчитать время, отточить его и т. Д.