Create Captivating Blur Motion Effects with jQuery blurMotion.js

blurMotion.js is an easy-to-use jQuery plugin to generate customizable blur motion effects, a technique where multiple blurred shapes are animated within a specified container. 

This creates visually striking backgrounds that highlight hero sections and grab user attention. This effect is a favorite among AI startup websites, likely due to its futuristic and engaging appearance.

You can adjust the blur limits and values, manipulate hue settings for a vibrant color display, and even control the movement and duration of the animated effects. This level of customization means that no two implementations of the blur motion effect need to look the same.

How to use it:

1. Load the blurMotion.js plugin after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/blurMotion.js"></script>

2. Add the CSS class bm to the target container.

<div class="bm">
  ...
</div>

3. Customize the appearance of the blur effect.

.blur-object {
  width: 100px;
  height: 100px;
  background-color: #11a207;
  border-radius: 50px;
  position: absolute;
  top: -30%;
  left: -20%;
  mix-blend-mode: color-dodge;
}

4. Adjust blur intensity and direction with the following parameters:

• lowerLimitValue: Lower limit of the blur effect. Default: 0
• upperLimitValue: Upper limit of the blur effect. Default: 10
• currentValue: Current value of the blur effect. Default: 0
• direction: Direction of movement. 0: Decrease. 1:Increase.

<div class="bm blrng_lowerLimitValue_upperLimitValue_currentValue_direction">
  ...
</div>

5. Customize the hue settings:

• lowerLimitValue: From 1 to 359. Default: 0.
• upperLimitValue: From 1 to 360. Default: 360.
• currentValue: Current angle. Default: 0.
• rangeOfIncAndDec: Range of increase/decrease. Default: 1.
• direction: Direction of movement. 0: Decrease. 1:Increase.

<div class="bm blhue_lowerLimitValue_upperLimitValue_currentValue_rangeOfIncAndDec_direction">
  ...
</div>

6. Config the animation:

• verticalLowerLimitValue: Lower limit of movement. Default: 0.
• verticalUpperLimitValue: Upper limit of movement. Default 100.
• verticalInitValue: Initial position. Default: 0.
• horizontalLowerLimitValue: Lower limit of movement. Default: 0.
• horizontalUpperLimitValue: Upper limit of movement. Default 100.
• horizontalInitValue: Initial position. Default: 0.
• duration: Duration in ms. Default: 5000.

<div class="bm blmove_verticalLowerLimitValue_verticalUpperLimitValue_verticalInitValue_horizontalLowerLimitValue_horizontalUpperLimitValue_horizontalInitValue_duration">
  ...
</div>

---

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