「blurMotion.js」の開発について
「ブラー（blur）」を利用したアニメーションを「HTMLのクラス名」の記述だけで実現できる「blurMotions.js」を開発しました。
「アニメーション」の種類
「blurMotion.js」では
- 「blur」の設定値の動的な変更
- 「blur」を設定した要素の「位置」の変更
- 「blur」を設定した要素の「色」の変更
を行うことができます。
それぞれの設定は「クラス属性」の「値」によって設定することができます。
「blurMotion.js」の「デモ」は下記リンクからご覧いただくことができます。
「blurMotion.js」は「MITライセンス」で公開しています。
「blurMotion.js」の設定方法について
「blurMotion.js」では、「class属性」の「値」でアニメーションを制御することができます。
「Github」の「blurMotion.js」の解説は英語のため、日本語でご説明していきたいと思います。
「blurMotion.js」「jQuery」のダウンロードと設定
「blurMotion.js(Github)」から「blurMotion.js」をダウンロード後、「任意のフォルダ」に配置して「読み込み設定」を行います。
そして「jQuery」をダウンロードし、「読み込み設定」を行います。
【設定例】
<script src='jquery-xxx.min.js'></script>
<script src='blurMotion.js'></script>
「ブラーアニメーション」を設定する「HTML要素」へ付加するクラス
「ブラーアニメーション」を設定する要素の「class属性」の「値」に「bm」を設定します。
【設定例】
<p class="bm">Blur Animation Element</p>
「bm」を設定した要素にさらに「アニメーションの設定」を追記していきます。
「Blur（ブラー）」の設定
「ブラー」は「ぼやけ」を表現する効果ですが、アニメーション中に「ブラーの適用値」を変化させることができます。
下記の形式で「クラス名」に設定を記述します。
blrng_lowerLimitValue_upperLimitValue_currentValue_direction
それぞれの値の意味は「下表」のようになります。
| 項目名 | 内容（設定可能範囲） | デフォルト値 |
|---|---|---|
| lowerLimitValue | 「blur」の下限値 | 0 |
| upperLimitValue | 「blur」の上限値 | 10 |
| currentValue | 「blur」の現在値（初期値） | 0 |
| direction | 「blur」の増減方向（0:減少 , 1:増加） | 1 |
例えば、
<p class="bm blrng_20_25_25_0">Animation Element</p>
のように設定します。
「色(Hue)」の設定
「要素の色」をアニメーション中に変更することができます。
下記の形式で「クラス名」に設定を記述します。
blhue_lowerLimitValue_upperLimitValue_currentValue_rangeOfIncAndDec_direction
それぞれの値の意味は「下表」のようになります。
| 項目名 | 内容（設定可能範囲） | デフォルト値 |
|---|---|---|
| lowerLimitValue | 「hue」の下限値 (1deg – 359deg) | 0deg |
| upperLimitValue | 「hue」の上限値 (0deg – 360deg) | 360deg |
| currentValue | 「hue」の現在値（初期値） | 0 |
| rangeOfIncAndDec | 「hue」の増減値 | 1 |
| direction | 「hue」の増減方向（0:減少 , 1:増加） | 1 |
「ディスプレイに表示される色」は、「HTML要素の色」と「hueの値」の影響を受けます。
下記リンクのページで、「HTML要素の色」を選択して「applyボタン」をクリックすると「hueの値」ごとの色の変化を確認することができます。
例えば、
<p class="bm blhue_0_100_50_2_1">Animation Element</p>
のように設定します。
「Move（移動）」の設定
「ランダムな位置」に「HTML要素」を移動することができます。
下記の形式で「クラス名」に設定を記述します。
blmove_verticalLowerLimitValue_verticalUpperLimitValue_verticalInitValue_horizontalLowerLimitValue_horizontalUpperLimitValue_horizontalInitValue_duration
それぞれの値の意味は「下表」のようになります。
| 項目名 | 内容（設定可能範囲） | デフォルト値 |
|---|---|---|
| verticalLowerLimitValue | 縦方向の「移動範囲」の下限値 | 0 |
| verticalUpperLimitValue | 縦方向の「移動範囲」の上限値 | 100 |
| verticalInitValue | 縦方向の「移動範囲」の初期値 | 0 |
| horizontalLowerLimitValue | 横方向の「移動範囲」の下限値 | 0 |
| horizontalUpperLimitValue | 横方向の「移動範囲」の上限値 | 100 |
| horizontalInitValue | 横方向の「移動範囲」の初期値 | 0 |
| duration | アニメーション実行時間 | 5000 |
例えば、
<p class="bm blmove_0_100_90_0_100_90_10000">Animation Element</p>
のように設定します。
「CSS」の設定
「アニメーション」する要素の親要素に
position: relative;
を設定します。
例えば、
<div id="blur-wrap">
<div id="blur-element"></div>
</div>
のようなHTML要素がある場合に「id属性」が「blur-element」の値の要素が「アニメーションする要素」の場合は、その親要素である「id属性」が「blur-wrap」の要素に
position: relative;
を設定します。
そして、「アニメーションする要素」の「id属性」が「blur-element」の要素には、
position: absolute;
を設定します。