Страницы

Поиск по вопросам

воскресенье, 1 декабря 2019 г.

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

#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);

Комментариев нет:

Отправить комментарий