Blur In/Out Animations With jQuery And CSS3 - blureffect.js

blureffect.js is a really small jQuery plugin which applies blur in and blur out effects to a specific element using CSS3 transition, transform and blur filter properties.

How to use it:

1. Load the stylesheet jq-blureffect.css for the blur in and blur out effects.

<link rel="stylesheet" href="jq-blureffect.css">

2. Load the latest version of jQuery library and the blureffect.js script at the end of the document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jq-blureffect.js"></script>

3. Applies the blur in and blur out effects to an element you specify.

<div class="blur">
  element to blur
</div>

$(document).ready(function() {
  $('.blur').blur('blur-in', 2500, function() {
    $('.blur').blur('blur-out', 2500);
  });
});

4. All possible parameters:

• anim: 'blur-in' or 'blur-out' 
• time: duration of animation
• cb: callback function

$(Selector).blur(anim, time, cb);

5. The default CSS rules for the blur effects.

.blur {
  transform-origin: 50% 50%;
  opacity: 0;
  visibility: hidden;
  filter: blur(8px);
  transform: scale(0.0001, 0.0001);
}
.blur-in {
  visibility: visible;
  filter: blur(0px);
  transform: scale(1, 1);
  opacity: 1;
  transition: all 0.25s ease-out;
}

.blur-out {
  visibility: hidden;
  filter: blur(8px);
  transform: scale(0.0001, 0.0001);
  opacity: 0;
  transition: all 0.25s ease-out;
}

---

This awesome jQuery plugin is developed by tomasantunes. For more Advanced Usages, please check the demo page or visit the official website.