How do I blur an element with scroll, until it's blurred to a certain point?


Tags: javascript,jquery,html,css,filter

Problem :

How do I blur an image as the user scrolls down the page, and then stop when it gets to blur(15px)? I don't want the image to get so blurry that it takes over the whole screen.

Here's what I have:

HTML:

<img class="boop" src="images/boop.jpg" />

jQuery:

$(window).scroll(function(e) {
  var distanceScrolled = $(this).scrollTop();
  $('.boop').css('-webkit-filter', 'blur('+distanceScrolled/30+'px)');
});

I've been googling how to set a maximum value for the distanceScrolled variable or the CSS filter and can't seem to figure it out. Thanks!



Solution :

You can just compute the min of the amount scrolled and 15 in the blur function. Like this:

$(window).scroll(function(e) {
  var distanceScrolled = $(this).scrollTop();
  $('.boop').css('-webkit-filter', 'blur(' + Math.min(distanceScrolled/30, 15) + 'px)');
});

Then it will stop at 15px.


    CSS Howto..

    How to select a div with nth-child()?

    How do I correctly locate a div within a list when making a horizontal nav bar with HTML/CSS?

    How to position div so that it renders outside container

    How can I style flexbox children in a multiline

    jQuery hide/show issue with offset

    How do I properly inspect jquery and javascript using web developer tools?

    How to indent items of a sublist using css and html in wordpress

    CSS how can i turn the scrolling off during the animation?

    How to set the default font in Google Closure Library rich text editor

    Position: fixed Background DIV with images makes scrolling slow: How to make conditional CSS rules for browser-compatibility?

    How to Format text boxes with Css

    How to make a hidden face appear from the top using -webkit-transform: rotateX();

    How do I differentiate between IE versions 6 to 10 using IE CSS Hacks?

    How to change divs placing from horizontal to vertical using css?

    How to make a background with 2 gradients in CSS

    How to detect css properties in div

    How to link a HTML page to a CSS file when the CSS file is in an upper directory?

    How to get resultant HTML after executing all scripts?

    How To Make Entire 'li' Area and Text A Clickable Link

    How do I float 3 elements right above each other and one left?

    how to target IE 6 AND IE7 in css

    How to create straight corners with CSS border-radius? [duplicate]

    How can i add a line-break on a costume tooltip?

    Django. how to apply css style on boolean form field?

    How to line up lists side by side?

    CSS - Get image to show text overlayed on top of the image on hover?

    How can I create HTML/CSS responsive tile?

    how to fix an element inside bootstrap modal with respect to bootstrap modal

    How to create a faded background image?

    How to show a title in the border of a div [duplicate]