Есть способ получше (Fixed blur-effect container)?

Question

[Предэйтор]

Здравствуйте, я нашел способ создать фиксированный контейнер с blur-эффектом, как оказалось способ простой, но достаточно страшный. Что будет с индексацией страницы, оптимизация (конечно картинки можно сжать до маленьких)? Ведь дублирование почти целой страницы совсем не хорошо. Проект в основном имеет множество 2к изображений.

Это лишь пример, поверх этого блока я использую svg на всю ширину этого хедера, с вырезом под логотип. Нельзя это провернуть как-то с частями вектора, разные SVG-фильтры? Или создать блок подругому?
Я буду очень признателен за обсуждение данного эффекта.

https://codepen.io/predaytor/pen/drNgXK

Comments

[Rustam Bainazarov]

Если контент у вас клонируется с помощью JS на стороне клиента после загрузки DOM, это не будет влиять на индексацию.

В целом, производительность решения — очень так себе. Но сильно лучше решений нет. Что на canvas, что так.

Нормальное решение — только если делать на backdrop-фильтре, который на данный момент поддерживается исключительно Safari -webkit-backdrop-filter: blur(10px);

[Предэйтор]

SmthTo, спасибо. И никакие svg фильтры, ничего не поможет? (Ну это как бы тоже самое что и filter blur, потому нет..). Так же в дизайне есть целый блок, очень красивый с таким же эффектом. Очень жаль.. ну проект заточен под ретину, может картинки в этом хедере сжать и растянуть.

[Rustam Bainazarov]

Predaytor, может и поможет, только производительность этого всего будет на грани фантастики.

[Предэйтор]

SmthTo, можете посмотреть решение html2canvas + StackBlur.js на CodePen? Это будет получше? Только брать бы как в моем примере "все" кроме хедера, а не целый body.

[Предэйтор]

SmthTo, и вроде как оно не воспринимает изображений..

[Предэйтор]

Решил проблему, использовав новый пример. Думаете это хороший вариант? Оптимизация?

[Rustam Bainazarov]

Predaytor, а можете прислать ссылку на новый вариант?

[Предэйтор]

SmthTo, да, завтра закину на codepen.

[Предэйтор]

SmthTo, скинул.

Answer 1

[Предэйтор]

Нашел подходящий вариант с помощью html2canvas.min.js + Filter Blur Css, хотя наверное лучше использовать библиотеку StackBlur.js. Посмотреть можно здесь. CodePen ведет себя странно, не захватывает изображение и медленно работает. Создайте страницу и попробуйте, не знаю насколько это производительно. Возможно изображение Canvas стоит сделать плохого качества.

Comments

[Предэйтор]

На мобильном устройстве (iOS, Android) при быстром скролле видна задержка и подтормаживание прокрутки. В первом варианте такого не было, нужно решить проблему.