0

I've tried to do it changing parameters but I can't get what I want.

My current code:

var pxlCount = 0;
jQuery(window).on('scroll', function () {
    pxlCount = jQuery(document).scrollTop()/20;
    jQuery(".blur_slider").css({"-webkit-filter": "blur("+pxlCount+"px)","-moz-filter": "blur("+pxlCount+"px)","filter": "blur("+pxlCount+"px)" })     
});

I get blurred 'blur_slider' class properly but it starts from the top of the page. I would like to start blurring scrolling from a certain point. e.g. 200px from the absolute top.

Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
El_LoBooo
  • 1
  • 1
  • 1
    [MDN blur](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur) - `filter:blur(radius)` - *radius*, not "distance from top of page" – freedomn-m Jul 21 '22 at 13:23
  • 1
    [this answer](https://stackoverflow.com/questions/27583937/how-can-i-make-a-css-glass-blur-effect-work-for-an-overlay) looks like it provides various solutions, eg using `backdrop-filter` – freedomn-m Jul 21 '22 at 13:25
  • Here's a quick example using a `position:fixed` overlay div - change the `top` to move it as desired (your `pxlCount`): https://jsfiddle.net/hfjqa6ns/ – freedomn-m Jul 21 '22 at 13:32
  • Sorry but I'm still don't understand how to apply this solution. If I apply position fixed on overlay div, how I can apply blur to .blur_slider div? – El_LoBooo Jul 22 '22 at 12:00
  • Anyone who can shed some light please? – El_LoBooo Jul 23 '22 at 12:08
  • Set the .top of .blur_slider to where you want it to start. – freedomn-m Jul 23 '22 at 14:39

0 Answers0