blurMotion.js work for javascript animation.
DEMO 001 DEMO 002 DEMO 003 DEMO 004 DEMO 005
Download blurMotion.js files and import setting to HTML head element. jQuery is set up the same way.
<script src="jquery-xxx.min.js"></script>
<script src="blurMotion.js"></script>
Set the class name "bm" to the HTML element to be animated.
<p class="bm">Blur Animation Element</p>
Specify the content of the animation with class name.
| animation | class name |
|---|---|
| blur | blrng |
| hue | blhue |
| move | blmove |
The set value of the blur is written the below described.
blrng_lowerLimitValue_upperLimitValue_currentValue_direction
| setting | description(value range) | Default Value |
|---|---|---|
| lowerLimitValue | Lower limit of blur | 0 |
| upperLimitValue | Upper limit of blur | 10 |
| currentValue | Current value of blur | 0 |
| direction | Direction of movement of blur values(0:Decrease in value, 1:Increase in value) | 1 |
<p class="bm blrng_20_25_25_0">Animation Element</p>
The set value of the hue is written the below described.
blhue_lowerLimitValue_upperLimitValue_currentValue_rangeOfIncAndDec_direction
| setting | description(value range) | Default Value |
|---|---|---|
| lowerLimitValue | Lower limit of hue (1deg - 359deg) | 0deg |
| upperLimitValue | Upper limit of hue (1deg - 360deg) | 360deg |
| currentValue | Current value of hue | 0 |
| rangeOfIncAndDec | Range of increase/decrease | 1 |
| direction | Direction of movement of hue values(0:Decrease in value, 1:Increase in value) | 1 |
The color that changes with changes in the Hue value of the blur is affected by the "color" set for the "element to animate".
You can check the "hue value and color change" of "specified color" from the link below.
<p class="bm blhue_0_100_50_2_1">Animation Element</p>
The set value of the move is written the below described.
blmove_verticalLowerLimitValue_verticalUpperLimitValue_verticalInitValue_horizontalLowerLimitValue_horizontalUpperLimitValue_horizontalInitValue_duration
| setting | description(value range) | Default Value |
|---|---|---|
| verticalLowerLimitValue | Lower limit of move | 0 |
| verticalUpperLimitValue | Upper limit of move | 100 |
| verticalInitValue | initial position | 0 |
| horizontalLowerLimitValue | Lower limit of move | 0 |
| horizontalUpperLimitValue | Upper limit of move | 100 |
| horizontalInitValue | initial position | 0 |
| duration | Animation Time milli second | 5000 |
<p class="bm blmove_0_100_90_0_100_90_10000">Animation Element</p>
Set "position:relative" to the "parent element" of the element to which blur is applied.
For example, the following code sets
position: relative
to "blur-wrap" in the "id attribute".
<div id="blur-wrap">
<div id="blur-element">
</div>
The element whose "id attribute" is "blur-element" is the element to which "blur" is applied, and
position: absolute
is set for this element.
Moving an element must be done with respect to its parent element.