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

パネルのスライド、コンテンツ・画像スライダー、ナビゲーション、アコーディオン、スピナー、棒グラフなど、アニメーションを伴ったさまざまなコンテンツを簡単に実装できるスクリプトを紹介します。

サイトのキャプチャ

jsMorph - javaScript motion framework

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
さまざまな基本となるアニメーションのユニット集。

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);
  }
}

top of page

©2017 coliss