jQuery with Blur effect does not work

Asked

Viewed 280 times

0

I have a jQuery script to apply Blur effect on a div while the page undergoes a scroll.

jQuery:

$(document).scroll(function(){
var pixs = $(document).scrollTop()
pixs = pixs / 10;
$('.tudo').css({"-webkit-filter": "blur("+pixs+"px)","filter": "blur("+pixs+"px)"});});

The class div . everything is the whole body of the page to test the effect, but nothing is working.

Can anyone identify the problem?

Script import

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
javascript jquery

  • By the test here is working. It must be something else with error. Already looked in the console some error?

  • You want the Blur effect only during scroll and while stopping go back to normal?

  • Could post the html?

  • I succeeded, the problem was in the overflow of the prince element, the div . everything.

1 answer

0


If you’re not seeing the animation you’re probably using a different browser than the filters you’re specifying for the css, don’t forget to add the rest to ensure the expected presentation in other browsers.

$(document).scroll(function() {
  var pixs = $(document).scrollTop()
  pixs = pixs / 10;

  $('.tudo').css({
    "-webkit-filter": "blur(" + pixs + "px)",
    "filter": "blur(" + pixs + "px)",
    "-moz-filter": "blur(" + pixs + "px)",
    "-o-filter": "blur(" + pixs + "px)",
    "-ms-filter": "blur(" + pixs + "px)",
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<div class="tudo">
  <img src="http://geradormemes.com/media/created/clkhev.jpg" />
</div>

Below is another example using an animation for Blur during scrolling and removing it later. What best worked can give a Blur motion effect, which maybe is what you’re looking for.

var scrollTimer = false;

$(document).scroll(function() {

  $('.tudo').removeClass('blur-out');
  $('.tudo').addClass('blur-in');

  if (scrollTimer) {
    clearTimeout(scrollTimer);
  }
  scrollTimer = setTimeout(afterScroll, 200);
});

function afterScroll() {

  $('.tudo').removeClass('blur-in');
  $('.tudo').addClass('blur-out');
}
.blur-in {
  -webkit-filter: blur(30px);
  -moz-filter: blur(30px);
  -o-filter: blur(30px);
  -ms-filter: blur(30px);
  filter: blur(30px);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
  -webkit-transition: 1s -webkit-filter linear;
  -moz-transition: 1s -moz-filter linear;
  -o-transition: 1s -o-filter linear;
  transition: 1s filter linear;
}

.blur-out {
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
  -webkit-transition: .5s -webkit-filter linear;
  -moz-transition: .5s -moz-filter linear;
  -o-transition: .5s -o-filter linear;
  transition: .5s filter linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<div class="tudo">
  <img src="http://geradormemes.com/media/created/clkhev.jpg" />
</div>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.