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

118

11 ноября 2019, 22:30

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

Я буду очень признателен за обсуждение данного эффекта.

UPDATE: Как оказалось существует свойство backdrop-filter: blur(10px), которое работает только в Сафари. Посмотрел SVG-фильтры, получается это тоже самое что и обычный filter, только для вектора, с множеством других функций.

Получается что описанный выше вариант мало не единственный, кроме как сделать "скриншот" всего контента.

UPDATE: Нашел подходящий вариант с помощью html2canvas.min.js + Filter Blur Css, хотя наверное лучше использовать библиотеку StackBlur.js. Посмотреть можно здесь.

UPDATE: Canvas. На мобильном устройстве, при быстром скролле с отпусканием тача, видна задержка и подтормаживание прокрутки.

UPDATE: Первый вариант с копированием всего контента самый лучший. Но нужно оптимизировать изображения. Сделать маленькие тамбнейлы и апскейл к 100% оригинала.

var content = $('.wrapper'), 
  header = $('.header-overlay'); 
 
$(content).clone().prependTo(header).addClass('blurred'); 
 
$(document).scroll(function() { 
  var scroll = $(this).scrollTop(); 
  $('.blurred').css({ 
    'transform': 'translateY(-' + scroll + 'px)' 
  }); 
});

body, 
html { 
  margin: 0; 
  overflow: 0; 
  position: relative; 
} 
 
img { 
  max-width: 100%; 
  height: auto; 
} 
 
.header { 
  position: relative; 
} 
 
.header-overlay { 
  position: fixed; 
  right: -15px; 
  left: -15px; 
  z-index: 99; 
  overflow: hidden; 
  width: -webkit-calc(100% + 30px); 
  width: -moz-calc(100% + 30px); 
  width: calc(100% + 30px); 
  height: 100px; 
} 
 
.header-overlay::after { 
  background: rgba(128, 128, 128, 0.1); 
  position: absolute; 
  display: block; 
  content: ''; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  z-index: 4; 
} 
 
.blurred { 
  background-color: #f1f2f2; 
  -webkit-filter: blur(10px); 
  filter: blur(10px); 
} 
 
.site-content { 
  position: relative; 
  z-index: 1; 
} 
 
.article-header { 
  position: relative; 
} 
 
.article-content { 
  padding: 20px; 
  max-width: 740px; 
  margin: 0 auto; 
} 
 
.article-content p { 
  font-size: 21px; 
  margin-bottom: 1em; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<header class="header"> 
  <div class="header-overlay"></div> 
</header> 
 
 
<div class="wrapper"> 
 
  <section class="site-content"> 
    <div class="article-header"> 
      <img class="header-image" src="https://images5.alphacoders.com/877/877223.jpg"> 
    </div> 
 
    <div class="article-content"> 
      <p>Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper 
        nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.</p> 
      <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra 
        augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> 
      <p>Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam 
        quis risus eget urna mollis ornare vel eu leo.</p> 
    </div> 
  </section> 
 
</div>