[JS]多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph

サイト構築 -JavaScript

Post on:2011年10月28日

jsMorphの特徴

jQueryなど他のスクリプトに依存せず、単独で動作します。
より少ないメモリで動作するように設計されています。
コントロールしやすいようcallback関数を備えています。
CSS3のさまざまなプロパティをサポートしています。
2.3KBの超軽量スクリプトです。

jsMorphのデモ

デモでは、最近のウェブサイトでもよく見かけるさまざまなアニメーションのコンテンツがあります。

Transition demo
IE5.5でも滑らかに動作するトランジションのアニメーション。

Bouncing ball demo
ボールのバウンドを再現したアニメーション。

Menu demo
アニメーションでCSSのさまざまなプロパティを変更。

Accordion demo
アニメーションで開閉するアコーディオン。

Chart bars demo
アニメーションで生成される棒グラフ。

Loading spinner demo
アニメーションでぐるぐる回るローディング用のスピナー。

iPhone UI demo
iPhoneのような滑らかなアニメーションでスライドするUI。

Image / content slider
滑らかなアニメーションで動作するコンテンツ・画像スライダー。

Tutorial demos
さまざまな基本となるアニメーションのユニット集。

[ad#ad-2]

jsMorphの実装

外部ファイル

当スクリプトを外部ファイルとして指定します。

<script src="js/jsMorph_min.js" type="text/javascript"></script>

JavaScript

jsMorphの基本書式です。

var myMorph = jsMorph(
  Object obj, // HTML element, Array of elements or elementCollection that are rendered
  Object prop, // css properties of end position
  [Object params], // parameters that influence the motion (duration, speed, ...)
  [Function ease], // easing function (included in easing package)
  [Function onMorphInit], // callback function after initializing the morphing sequence
  [Function onMorph], // callback function with every step during rendering
  [Function onMorphEnd] // callback function at the end of the obj's morphing phase
).start();

or

var myMorph = new jsMorph();
myMorph.concat(obj, prop, [params], [ease], [onMorphInit], [onMorph], [onMorphEnd]);
myMorph.start();

実際の記述は、下記のようになります。
3番目の「Menu demo」を例に、CSSの各プロパティをアニメーションで変更します。

var menu = document.getElementById('menu'),
    links = menu.getElementsByTagName('a'),
    myMorph = new jsMorph(links,
      {height: '35px', 'border-bottom-width' : '18px', 'border-top-width' : '10px',
        'margin-bottom' : '-18px', 'margin-top' : '-10px', 'padding-top' : '24px'},
      {duration : 300},
      function(n) {return --n*n*n*n*n+1}
    );

menu.onmouseout = menu.onmouseover = function(e) { // event delegation
  var e = e || window.event,
      obj = e.target || e.srcElement;
      
  if (obj.tagName.toLowerCase() == 'a') {
    obj.backwards = (e.type == 'mouseout') ? true : false;
    myMorph.start(obj);
  }
}