[JS]CSS3アニメーションを時間ではなく、距離でコントロールするスクリプト -Approach

オブジェクトに近くなるほど、不透明度を増やしたり、サイズを大きくしたりなど、距離でCSS3アニメーションをコントロールするjQueryのプラグインを紹介します。

Approach

[ad#ad-2]

• Approachとは
• Approachのデモ
• Approachの使い方

Approachとは

通常、CSS3アニメーションは時間でコントロールしますが、Approachは距離でコントロールします。
例えば、下記のように右のオブジェクトから離れると透明で、右に近づくにつれ不透明度が増えます。

Approachのエフェクト例

Approachのデモ

Approachのデモは2つあります。
まずは、テキストのサイズとカラーのアニメーションからご紹介。

まずは、通常時です。

Demo: テキストのサイズとカラー

カーソルを近づけると、サイズとカラーが少し変更されます。

Demo: テキストのサイズとカラー

カーソルを一番近づけた状態です。

Demo: テキストのサイズとカラー

[ad#ad-2]

続いて2つ目、不透明度のアニメーションです。
通常時は、「opacity:0.2」です。

Demo: 複数のエレメントの不透明度

円形のオブジェクト全てに適用されるので、対象の周辺のオブジェクトにも不透明度が少しだけ適用されます。

Demo: 複数のエレメントの不透明度

カーソルを移動すると、美しいグラデーションのようなエフェクトになります。

Demo: 複数のエレメントの不透明度

Approachの使い方

実装は2つのデモのキャプチャと共に紹介します。

Demo: テキストのサイズとカラー

HTML

テキストをa要素で実装します。

<a id="demo-link">I grow and change color</a>

CSS

初期状態のスタイルを設定します。

<style>
  a#demo-link {
    font-size: 24px;
    color: #FFFFCC;
    line-height: 1.5em;
    text-align: center;
    text-decoration: none;
  }
</style>

JavaScript

「jquery.js」と「jquery-ui.js」と当スクリプトを外部とし、変更後のスタイルを設定します。

<script>
  $("a#demo-link").approach({
      "fontSize": "40px"
    , "color": "#CC3300"
  }, 200);
</script>

Demo: 複数のエレメントの不透明度

HTML

円形のオブジェクトを用意します、デモでは40個です。

<img class="circle" src="http://farm3.static.flickr.com/2526/4011568848_ff5aeeefb8_o.jpg" />

CSS

初期状態のスタイルを設定します。

<style>
  img.circle {
    float: left;
    height: 80px;
    width: 80px;
    opacity: 0.2;
    filter: alpha(opacity=20);
    zoom: 1;
    z-index: 0;
  }
</style>

JavaScript

「jquery.js」と「jquery-ui.js」と当スクリプトを外部とし、変更後のスタイルを設定します。

<script>
  $("img.circle").approach({
    opacity: 0.8
  }, 100);
</script>