ianime.jsの最近のブログ記事

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>


  





    



  
2007.12.02

  
ianime.js + Movable Type

  

    昨日のエントリーで紹介したianimeの写真を，ブログ作成ツールMovable Typeのテンプレートを使って簡単に更新できるようにしました（サイドバーのRecent Photos）．JavaScriptの実行部分やHTMLを書き直すことなく，Movable Typeのダッシュボードで写真をアップロード&再構築するだけで，最新の写真5枚を表示することができます．

仕組みは簡単で，MTAssetタグやlastnモディファイア，MTAssetIDタグを組み合わせてJavaScriptのidに連番を与えたり画像のリンク先を指定しているだけ．

…iPhoneもtouchも持ってないし，JavaScriptは初めてな私が出来るのはこの程度．

  





    



  
2007.12.01

  
ianime.jsを使ってみた

  

    私が良く見るブログであるLife is beautifulにて，iPhone/iPod touch用のアニメーション・ライブラリが公開されていたので遊んでみた．といっても，ソースコードをコピーして画像を変えただけ．これからいじくってみようと思う．






  





    




    
    « GR DIGITAL |
    
    メインページ |
    アーカイブ
    
    | iPhone »