Как сделать динамически изменяющийся эффект размытия с хорошей производительностью?

Question

[MaxKondratenko]

Делаю слайдер изображений типа RoundAbout
jsfiddle.net/MaxKondratenko/4anxt8gL/1
и наткнулся на проблему... мне нужно сделать размытие изображения, по идее хорошо бы его было сделать динамически изменяемым... но например как сделано сейчас через добавление класса, всё работает но не динамически + ко всему если перемещать уже размытые изображения, производительность падает в разы...
Может посоветуете какие то решения ? в какую сторону вообще копать. думал о HTML5 Canvas, но не столкнусь ли я там с такой же проблемой производительности ?

Answer 1

[Дмитрий Евграфович]

Самый производительный способ - это сделать два слоя друг один поверх другого, на одном вставить четкую картинку, под него подложить копию картинки с блюром (то есть уже размытый в редакторе jpeg), а затем добавлять верхнему слою класс примерно такой: transition: opacity 2s; opacity: 0;

Фильтр блюра сжирает огромное количество ресурсов в силу объема вычислений и оптимизировать вы его никак не сможете.

Comments

[MaxKondratenko]

да я об этом думал уже, тут видимо придётся играться с HTML5 canvas, чтобы с его помощью создавать размытую картинку, и потом её уже добавлять ещё одним слоем... , не сильно ли это нагрузит браузер если я это буду делать уже после загрузки страницы ? можно конечно создавать второе изображение при загрузке файлов на сервер... но тогда количество подгружаемых картинок увеличится в двое... что по сути увеличит трафик тоже в двое...

[MaxKondratenko]

просто ни разу ещё не работал с html5 canvas... кроме рисования простых фигур...

[Дмитрий Евграфович]

@MaxKondratenko вот тут не подскажу, по идее если вы выводите блюр с помощью js скрипта, то это будет медленнее, разве что ваш скрипт не пересчитает и закеширует смазанные картинки, чтобы их использовать. Я в свое время столкнулся с этим, но тестировать разные решения времени не было - сайт надо было сдавать и я просто отказался от блюра в слайдере. Можете если время позволяет изучить тему, думаю, ссылку habrahabr.ru/post/140594 вы уже нашли. Даже если не выйдет сделать быстрый эффект (что повторюсь, возможно только при предварительном кешировании смазанной картинки, но не просчете ее в реальном времени), то в любом случае опыт, полученный от ковыряний плагинов зря не пропадет :)

[MaxKondratenko]

Спасибо за помощь !)
Да надеюсь будет время я разберусь, тоже уже надо сдавать проект... оставлю пока добавление blur на уже прокрученную картинку после анимации... клиента устраивает... а я в следующем проекте думаю буду использовать подобный слайдер, там и постараюсь разобраться и выложу сюда решение если найду.