2007.12.03

続・ianime.js + Movable Type

引き続きianimeについてのお話．
前回からちょこっといじって，今度はフェードイン・フェードアウトに加えて写真をゆっくりと移動させてみました（Recent Photos参照）．
以下Movable Typeのテンプレートの記述．
<html>
<head>
<style>
.photo-ianime {
  width: 300px;
  position: absolute;
  left: 0px;
  top: 0px;
}
</style>

<script src="ianime/ianime024.js"></script>
<script src="ianime/ianime024ex.js"></script>
<script src="ianime/ibrowse010.js"></script>
<script type="text/javascript">
var anime = new iAnime();
function start()
{
  anime.addSequence([
    <MTAssets type="image" lastn="5">
    { id:'pic<$MTAssetID$>', effect:'fadeout' },
    </MTAssets>
    { id:'pic0', effect:'fadeout' },

    <MTAssets type="image" lastn="5">
      { id:'pic<$MTAssetID$>', x:-20 },
      { id:'pic<$MTAssetID$>', x:-35, effect:'fadein', duration:3000},
      { id:'pic<$MTAssetID$>', x:-45, duration:2000},
      [{ id:'pic<$MTAssetID$>', x:-55, effect:'fadeout', duration:2000}],
    </MTAssets>

    { id:'pic0', effect:'fadein', duration:3000 },
    { onComplete:start }
  ]);
}
</script>

</head>

<body onload="start()">

  <MTAssets type="image" lastn="5">
    <img id="pic<$MTAssetID$>" src="<$MTAssetURL$>" class="photo-ianime" />
  </MTAssets>
  <img class="photo-ianime" id="pic0" src="ianime/white.jpg" />

</body>
</html>