Predaytor
@Predaytor
C# .NET Core, React, Typescript

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

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

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

https://codepen.io/predaytor/pen/drNgXK
  • Вопрос задан
  • 151 просмотр
Решения вопроса 1
Predaytor
@Predaytor Автор вопроса
C# .NET Core, React, Typescript
Нашел подходящий вариант с помощью html2canvas.min.js + Filter Blur Css, хотя наверное лучше использовать библиотеку StackBlur.js. Посмотреть можно здесь. CodePen ведет себя странно, не захватывает изображение и медленно работает. Создайте страницу и попробуйте, не знаю насколько это производительно. Возможно изображение Canvas стоит сделать плохого качества.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы