Размытый фон под блоком

#javascript #jquery #css3 #html5 #svg

Подскажите пожалуйста, с помощью чего можно реализовать эффект размытия. Необходимо
реализовать так, чтобы под блоком с меню контент размывался.
У меню допустим свой фон background: rgba(32, 32, 32, 0.6), а все что под блоком
это  контент страницы. И нужно, чтобы контент под блоком меню размывался в неподвижном
состоянии и при прокрутке страницы. Меню должно быть зафиксировано 
в верху страницы.

Нужно примерно такого вида:      


    

Ответы

Ответ 1

Недавно увидел  вопрос Qwertiy, который мне очень понравился. И даже сразу мысленно
нашел ему применение... Но на практике ни где не использовал. А когда прочитал окончательный
вариант данного вопроса, первая мысль которая пришла, это 
ответ Sasha Omelchenko на вопрос Qwertiy. Ну сложив всю эту информацию, решил, что
это лучший вариант решения для данного вопроса.

P.S. Для лучшего эффекта разверните на весь экран...



document.querySelector('main').addEventListener('scroll', function(e) {
  var dy = this.scrollTop;
  document.querySelector('#text').style.transform = "translateY(" + -dy + "px)";
});

document.querySelector('#text').addEventListener('wheel', function(e) {
  document.querySelector('main').scrollTop -= e.wheelDeltaY;

  e.preventDefault();
});
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background: #272727;
  color: white;
  background: url(https://wallbox.ru/wallpapers/main/201447/89de87d17b78c12.jpg);
  background-attachment: fixed;
}

#wrapper {
 overflow-x: hidden;
  position: relative;
 
  width: 100%;
  height: 100%;
}

header {
  overflow: hidden;
  width: 100%;
  height: 220px;
  position: sticky;
  top: 0;
  background: transparent;
  top: 0;
}

#layerBlurwhite {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, .5);
  filter: blur(3px);
}

#layerBlurBg {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: sticky;
  top: 0;
  background-image: url(https://wallbox.ru/wallpapers/main/201447/89de87d17b78c12.jpg);
  background-position: 0 0;
  filter: blur(10px);
}

#layerText {
  z-index: 155;
  width: 100%;
  height: 220px;
  position: fixed;
  top: 0;
  background: transparent;
  color:white;
  text-align: center;
  line-height: 2;
  font-size: 50px;
}

main {
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
  width: calc(100% + 20px);
  height: calc(100% - 220px);
  background: transparent;
}

main p {
  margin-top: 150px;
}

header p {
  position: relative;
  top: -220px;
  margin-top: 150px;
  color: white;
  filter: blur(10px);
}

  

    

    

    
MENU BAR
    

      
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo veniam cumque
earum sit aspernatur voluptas magni, neque repellendus obcaecati, cupiditate quae facilis
necessitatibus praesentium officiis et rem minus, atque, voluptatem totam voluptate
        nobis quibusdam asperiores! Ipsa, cupiditate maxime velit rem nulla vel optio,
consequuntur enim eos neque doloribus. Doloribus vel odio et adipisci placeat ut, quia
temporibus, sit laudantium ipsam consectetur quas culpa sequi libero commodi
        non, veniam. Maiores fugiat, amet! Sequi optio dolor cupiditate animi, earum
necessitatibus quae vel nisi doloremque eos eligendi sunt ipsa, ex atque dolorum sint
nulla voluptatibus libero et similique consequatur dolorem iste, distinctio labore!
      
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam mollitia
laborum placeat, saepe, voluptates exercitationem consequuntur ea reiciendis esse voluptate
sit illo tempore nobis, doloribus sunt nesciunt ipsa fugit. Minus earum, amet fuga
        exercitationem dolore nobis, possimus adipisci accusantium odit libero facere
cumque nostrum dolorum nemo veritatis modi vel pariatur fugiat. Sapiente quos qui reiciendis
saepe adipisci sint placeat accusantium. Saepe ipsam aut nostrum, ratione,
        fugit, culpa iusto, illum atque dicta delectus error explicabo ex? Dolorem
saepe veritatis ea delectus quaerat fugit architecto quis error hic vero, laboriosam
enim, exercitationem. Obcaecati, illum? Sed minus, deleniti fuga labore, odit totam
        et.
      
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore tempora
libero temporibus impedit veniam. Necessitatibus totam iusto, ducimus voluptas voluptate
sed doloribus consequatur quidem nisi veniam tempore aliquid ratione, provident
        adipisci nobis animi placeat quisquam recusandae. Eaque nihil modi officiis
accusamus, repellat libero, expedita adipisci explicabo voluptatum minima, quibusdam
quo sequi. Aliquid nobis, eos voluptate repudiandae eius provident officiis enim ad
        nemo quod beatae ex expedita distinctio quia at, voluptatum iste cum? Sint
possimus quam saepe iure perspiciatis consectetur accusantium excepturi asperiores
animi, cumque dolores itaque accusamus! Cum quia iste aperiam, minima quas quam ipsam
        adipisci at sunt rem porro.
      
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab excepturi quis
dolores odit mollitia sint perferendis voluptas delectus eaque quas dolorum nesciunt
iure repellat cum architecto, in maiores! Consectetur ratione iste nemo eos doloribus
        soluta ut quas accusantium rerum labore beatae omnis tempora neque, laboriosam
ducimus non, itaque expedita eaque quidem. Veniam nemo eligendi, voluptatem quidem
accusantium, doloribus sed, explicabo, ex fugiat vel ab exercitationem molestias
        error repudiandae sunt tempora maiores. Repellendus aut, id corporis nobis
rerum eum debitis quod porro reprehenderit illo nulla, in iure. Eius, quidem! Cumque
earum ipsam vel sapiente soluta, iste animi, illo aliquam aspernatur est.
      
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio voluptas
molestias perspiciatis ex quidem ullam facere esse ab qui voluptatem alias eligendi
praesentium, unde, dolores, enim aperiam quam in, eum deleniti vel! Accusamus dolorum,
        dolore ut sequi sunt quidem earum, quis recusandae sint esse consectetur
veritatis distinctio explicabo nemo dignissimos sed? Ut quibusdam sequi, est laudantium
inventore, minus facilis sed dignissimos id, eum dolore. Unde voluptas veritatis suscipit
        quia ab mollitia magni hic nisi vero odio harum quos, molestiae ullam autem
rerum earum explicabo temporibus minus quasi numquam dolores provident quibusdam adipisci!
Ea quasi doloribus reiciendis ducimus cupiditate alias recusandae.
      
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga iste voluptates
culpa, est velit perspiciatis natus eaque quod quibusdam omnis et impedit voluptatem
recusandae officia assumenda, atque quasi fugiat praesentium beatae tempora dolorem,
        earum nulla dolor. Esse eveniet error aut repudiandae quaerat quis provident
inventore aliquam minima harum magni sapiente cum quisquam omnis, quidem molestias
possimus dolores numquam tempore officia sed modi. Aliquid quisquam sint aliquam ratione,
        officiis quibusdam! Esse amet consectetur dolorem, dolor velit alias facere
vero eaque non tempora minus illo maxime quis recusandae debitis eos pariatur, voluptas
quasi autem ex! Harum architecto repellat dolore libero placeat natus.
      
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis quibusdam
alias, tempora nam enim, explicabo non molestiae, earum magni rem consectetur totam
tenetur ratione necessitatibus iure vitae. Nam tenetur quo sunt voluptates deleniti,
        et iure quod architecto aspernatur eaque nesciunt at modi ex nostrum possimus
impedit maiores quae optio quas dignissimos similique incidunt aliquid eum facere commodi.
Officiis perspiciatis aperiam alias numquam voluptatum, vitae aut accusamus
        ratione, expedita quibusdam odit, ipsa? Eum rerum quasi nobis, recusandae
voluptatum accusamus alias, labore non odio quaerat fugiat, fuga nam fugit maxime sed
eveniet! Est aliquid, iure tempora repellendus provident autem obcaecati voluptas dolorem!
      
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eos commodi
molestias, sed labore impedit quo. Dolorem assumenda dolore, facere, at temporibus
eos facilis dolorum quas doloribus nesciunt sequi ut voluptas dolores est. Dolore aliquid
        quasi inventore quam dolorum maiores, id placeat dolores autem numquam, beatae?
Consectetur aspernatur sequi deleniti unde labore iusto earum fuga eius est distinctio
tempore cum, quo non veniam, adipisci animi corporis voluptatibus iure delectus
        velit numquam ea enim repellat debitis. Maiores quas quibusdam id provident
a magnam molestias tempore dolores nemo vero in laboriosam assumenda accusantium, quaerat,
deserunt ratione numquam molestiae. Sint, placeat consequuntur dolores.
      
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo repudiandae
doloribus accusamus accusantium, odit mollitia expedita omnis recusandae dolorem quos
quidem consequatur, ab iste fugit, eum veritatis ex eaque culpa quis praesentium. Voluptas
        perferendis cumque, magni at error enim pariatur fuga, reprehenderit quidem
odio ex non omnis dolorem ab vero asperiores molestiae ipsum praesentium aliquam. Accusantium
ipsam aut autem voluptatum non nostrum tempore illum atque ducimus. Quis
        sit omnis ea, odio quae eum nostrum fugit dignissimos autem, veniam dicta
sed quia minima debitis magnam harum inventore nobis architecto nihil. Recusandae aspernatur
unde repudiandae, excepturi laborum, commodi dolorum suscipit tempora. Laborum.
      
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime explicabo
magni delectus repudiandae, esse mollitia ullam pariatur, ad quaerat atque asperiores
consequatur quos iure facilis sit placeat neque incidunt, ipsam nesciunt voluptas modi
        debitis! Consequuntur, suscipit libero quisquam illum rem reprehenderit,
nisi tenetur. Vero rem sed neque quia soluta, sapiente reprehenderit aspernatur quaerat
unde suscipit, cum error voluptatibus laudantium quos hic, modi voluptates praesentium
        eum repellat impedit recusandae quam alias voluptatum fuga. Ex nisi tempora
corrupti, amet ea iusto vero, repellat quidem autem, pariatur similique. Aperiam officia
consequatur explicabo illo cupiditate, iusto, voluptates sed dolorum dolorem qui
        corporis nam eligendi!
    
  
  

    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo veniam cumque
earum sit aspernatur voluptas magni, neque repellendus obcaecati, cupiditate quae facilis
necessitatibus praesentium officiis et rem minus, atque, voluptatem totam voluptate
      nobis quibusdam asperiores! Ipsa, cupiditate maxime velit rem nulla vel optio,
consequuntur enim eos neque doloribus. Doloribus vel odio et adipisci placeat ut, quia
temporibus, sit laudantium ipsam consectetur quas culpa sequi libero commodi non,
      veniam. Maiores fugiat, amet! Sequi optio dolor cupiditate animi, earum necessitatibus
quae vel nisi doloremque eos eligendi sunt ipsa, ex atque dolorum sint nulla voluptatibus
libero et similique consequatur dolorem iste, distinctio labore!
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam mollitia laborum
placeat, saepe, voluptates exercitationem consequuntur ea reiciendis esse voluptate
sit illo tempore nobis, doloribus sunt nesciunt ipsa fugit. Minus earum, amet fuga
      exercitationem dolore nobis, possimus adipisci accusantium odit libero facere
cumque nostrum dolorum nemo veritatis modi vel pariatur fugiat. Sapiente quos qui reiciendis
saepe adipisci sint placeat accusantium. Saepe ipsam aut nostrum, ratione,
      fugit, culpa iusto, illum atque dicta delectus error explicabo ex? Dolorem
saepe veritatis ea delectus quaerat fugit architecto quis error hic vero, laboriosam
enim, exercitationem. Obcaecati, illum? Sed minus, deleniti fuga labore, odit totam
et.
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore tempora
libero temporibus impedit veniam. Necessitatibus totam iusto, ducimus voluptas voluptate
sed doloribus consequatur quidem nisi veniam tempore aliquid ratione, provident adipisci
      nobis animi placeat quisquam recusandae. Eaque nihil modi officiis accusamus,
repellat libero, expedita adipisci explicabo voluptatum minima, quibusdam quo sequi.
Aliquid nobis, eos voluptate repudiandae eius provident officiis enim ad nemo quod
      beatae ex expedita distinctio quia at, voluptatum iste cum? Sint possimus quam
saepe iure perspiciatis consectetur accusantium excepturi asperiores animi, cumque
dolores itaque accusamus! Cum quia iste aperiam, minima quas quam ipsam adipisci at
      sunt rem porro.
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab excepturi quis
dolores odit mollitia sint perferendis voluptas delectus eaque quas dolorum nesciunt
iure repellat cum architecto, in maiores! Consectetur ratione iste nemo eos doloribus
      soluta ut quas accusantium rerum labore beatae omnis tempora neque, laboriosam
ducimus non, itaque expedita eaque quidem. Veniam nemo eligendi, voluptatem quidem
accusantium, doloribus sed, explicabo, ex fugiat vel ab exercitationem molestias error
      repudiandae sunt tempora maiores. Repellendus aut, id corporis nobis rerum
eum debitis quod porro reprehenderit illo nulla, in iure. Eius, quidem! Cumque earum
ipsam vel sapiente soluta, iste animi, illo aliquam aspernatur est.
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio voluptas
molestias perspiciatis ex quidem ullam facere esse ab qui voluptatem alias eligendi
praesentium, unde, dolores, enim aperiam quam in, eum deleniti vel! Accusamus dolorum,
      dolore ut sequi sunt quidem earum, quis recusandae sint esse consectetur veritatis
distinctio explicabo nemo dignissimos sed? Ut quibusdam sequi, est laudantium inventore,
minus facilis sed dignissimos id, eum dolore. Unde voluptas veritatis suscipit
      quia ab mollitia magni hic nisi vero odio harum quos, molestiae ullam autem
rerum earum explicabo temporibus minus quasi numquam dolores provident quibusdam adipisci!
Ea quasi doloribus reiciendis ducimus cupiditate alias recusandae.
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga iste voluptates
culpa, est velit perspiciatis natus eaque quod quibusdam omnis et impedit voluptatem
recusandae officia assumenda, atque quasi fugiat praesentium beatae tempora dolorem,
      earum nulla dolor. Esse eveniet error aut repudiandae quaerat quis provident
inventore aliquam minima harum magni sapiente cum quisquam omnis, quidem molestias
possimus dolores numquam tempore officia sed modi. Aliquid quisquam sint aliquam ratione,
      officiis quibusdam! Esse amet consectetur dolorem, dolor velit alias facere
vero eaque non tempora minus illo maxime quis recusandae debitis eos pariatur, voluptas
quasi autem ex! Harum architecto repellat dolore libero placeat natus.
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis quibusdam
alias, tempora nam enim, explicabo non molestiae, earum magni rem consectetur totam
tenetur ratione necessitatibus iure vitae. Nam tenetur quo sunt voluptates deleniti,
      et iure quod architecto aspernatur eaque nesciunt at modi ex nostrum possimus
impedit maiores quae optio quas dignissimos similique incidunt aliquid eum facere commodi.
Officiis perspiciatis aperiam alias numquam voluptatum, vitae aut accusamus
      ratione, expedita quibusdam odit, ipsa? Eum rerum quasi nobis, recusandae voluptatum
accusamus alias, labore non odio quaerat fugiat, fuga nam fugit maxime sed eveniet!
Est aliquid, iure tempora repellendus provident autem obcaecati voluptas dolorem!
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eos commodi
molestias, sed labore impedit quo. Dolorem assumenda dolore, facere, at temporibus
eos facilis dolorum quas doloribus nesciunt sequi ut voluptas dolores est. Dolore aliquid
      quasi inventore quam dolorum maiores, id placeat dolores autem numquam, beatae?
Consectetur aspernatur sequi deleniti unde labore iusto earum fuga eius est distinctio
tempore cum, quo non veniam, adipisci animi corporis voluptatibus iure delectus
      velit numquam ea enim repellat debitis. Maiores quas quibusdam id provident
a magnam molestias tempore dolores nemo vero in laboriosam assumenda accusantium, quaerat,
deserunt ratione numquam molestiae. Sint, placeat consequuntur dolores.
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo repudiandae
doloribus accusamus accusantium, odit mollitia expedita omnis recusandae dolorem quos
quidem consequatur, ab iste fugit, eum veritatis ex eaque culpa quis praesentium. Voluptas
      perferendis cumque, magni at error enim pariatur fuga, reprehenderit quidem
odio ex non omnis dolorem ab vero asperiores molestiae ipsum praesentium aliquam. Accusantium
ipsam aut autem voluptatum non nostrum tempore illum atque ducimus. Quis sit
      omnis ea, odio quae eum nostrum fugit dignissimos autem, veniam dicta sed quia
minima debitis magnam harum inventore nobis architecto nihil. Recusandae aspernatur
unde repudiandae, excepturi laborum, commodi dolorum suscipit tempora. Laborum.
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime explicabo
magni delectus repudiandae, esse mollitia ullam pariatur, ad quaerat atque asperiores
consequatur quos iure facilis sit placeat neque incidunt, ipsam nesciunt voluptas modi
      debitis! Consequuntur, suscipit libero quisquam illum rem reprehenderit, nisi
tenetur. Vero rem sed neque quia soluta, sapiente reprehenderit aspernatur quaerat
unde suscipit, cum error voluptatibus laudantium quos hic, modi voluptates praesentium
      eum repellat impedit recusandae quam alias voluptatum fuga. Ex nisi tempora
corrupti, amet ea iusto vero, repellat quidem autem, pariatur similique. Aperiam officia
consequatur explicabo illo cupiditate, iusto, voluptates sed dolorum dolorem qui
      corporis nam eligendi!
  



Ответ 2

У filter есть параметр blur().

Например:
filter: blur(1px);