jQuery with blur effect does not work

Question

jQuery with blur effect does not work

Navigation

#1 by (0 votes)

0

I have a jQuery script to apply blur effect to a div while the page undergoes scrolling.

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 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

asked by anonymous 22.03.2018 / 02:29

1 answer

Add in bitbucket all my files modified by command line Jaspersoft Misdirected Print

score 0 · Accepted Answer

If you are not seeing the animation you are probably using a browser other than the filters you are specifying for css, do not forget to add the others 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>

Belowisanotherexampleusingananimationtoblurduringthescrollandthenremoveit.Whatworksbestcangiveamotionblureffect,whichmaybewhatyouarelookingfor.

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>