« 出品していないのです | トップページ | 「コンピューター・アート」オフ会展に参加する »

2010年4月 5日 (月)

JavaScriptで絵を動かしたる

パフォーマーの子どものPRのためのサイトを作ってます。デザインとコーディング、素材を担当。写真と文やほかは彼女が用意する段取りです。締め切りは特にナシ、完成は未定です。

Javascript0

ふと思いついたちょっと凝ったナビゲーションアイデアを言ってみたら気に入ってくれました。アンカーに矢印が乗る onclick と画像が動く仕掛け。カッコよくFlashで作る方法がありますが持っていません。gifアニメは動くのは一度っきりになりそうなのでボツ。少々カッコ悪くJavaScriptで一枚の画像を移動で動かすことにしました。まずはその練習から。

Javascript1

これが参考本、去年自分のギャラリーサイトを作る時、HTML/CSSだけでは表現が足りなくなって買ったものです。その第4章DOMを使用したアニメーションを実行するを参考に練習コードを書いてみます。わたしはいちいち手打ちし、虫を潰し、目的の動作を勝ち取るまでねちこく戦うのだ。あきらめず自分で考え、戦っているうちに、ひょいと難関を飛び越える瞬間がやってくるのです。時には動かない原因をグクッたりする、ついでにこんな書き方もあるんやと勉強になったりもします。付属CDにサンプルコードをコピペでは分かったつもりでおしまい、応用や修正が出来なくなってしまう。プログラミングに限らす、身付くには試行錯誤の時間がいるのです。


Javascript2

エラーを潰して、よしスタートボタンをクリック。でもどうしても金魚は動いてくれない。どうしたもんやろうthink think think

Javascript3_2

金魚画像をやめて、文字に。最初のコードはいじりまくって直しようがないので最初から書きなおしです。練習開始5日目でやっと文字が動いたぁhappy01 heart01

後はこの動いている文字を画像に差し替えるだけ。左右に向きを変えて動くようにコードを書き足してみました。leftright

きんぎょ

まだ人にお見せできるするのは恥ずかしいコードです。それでも見たい、参考にしたい人はブラウザにコードを表示させる機能Firefoxでは[表示]→[ベージのソース]でご覧ください。

|

« 出品していないのです | トップページ | 「コンピューター・アート」オフ会展に参加する »

コメント

クリックした数のファンクションコードが
呼び出され同時に動くので
早くなるみたいです。
練習なのでクリックは一回だけ、
止まるのコードは書きこんでないの。

まだ遊びたかったら
更新でページを読み直して下さいね。

投稿: ひとみ | 2010年4月 9日 (金) 12時38分

「およぐ」を何回もクリックしたら、金魚が超高速で泳いで、おもしろかったです。

投稿: 赤胴鈴之助 | 2010年4月 8日 (木) 22時46分

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/215806/47995242

この記事へのトラックバック一覧です: JavaScriptで絵を動かしたる:

« 出品していないのです | トップページ | 「コンピューター・アート」オフ会展に参加する »