Create Blur Animations Using jQuery And CSS Filter - blurMotion.js

blurMotion.js is a lightweight jQuery animation library that helps create an animated blur effect by dynamically changing the blur radius value on elements.

Can be used to add a sense of speed or movement to static elements on the webpage.

How to use it:

1. To use the blurMotion.js plugin, simply add the following script to your page:

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery blurMotion.js -->
<script src="/path/to/blurMotion.js"></script>

2. Then, to create a blur animation, just add the bm class to the element:

<p class="bm">
  Blur Animation
</p>

3. Config the blur animation using the following parameters:

• lowerLimitValue: lowest blur value
• upperLimitValue: highest blur value
• currentValue: current blur value
• direction: 0: From highest to lowest; 1: From lowest to highest

<p class="bm lowerLimitValue_upperLimitValue_currentValue_direction">
  Blur Animation
</p>

4. The plugin has the ability to manipulate hues using the hue-rotate() CSS function:

• lowerLimitValue: lowest hue angle
• upperLimitValue: highest hue angle
• currentValue: current hue angle
• rangeOfIncAndDec: 1
• direction: 0: From highest to lowest; 1: From lowest to highest

<p class="bm blhue_lowerLimitValue_upperLimitValue_currentValue_rangeOfIncAndDec_direction">
  Blur Animation
</p>

5. Creates an element with an animated blur effect that moves around within its parent container.

• lowerLimitValue: 0 - 100
• upperLimitValue: 0 - 100
• duration: duration in ms

<div id="blur-wrap">
  <div id="blur-element" class="bm lowerLimitValue_upperLimitValue_duration">
    Element
  </div>
</div>

/* required CSS */
#blur-wrap {
  position: relative
}

#blur-element {
  position: absolute
}

---

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