ブログタイトルバナーの背景画像をアニメーションで動かしてみました。
作り方は簡単。画像ソフトでパラパラ漫画風の画像を複数作成し、GIFアニメーション作成ソフトで連結させます。
具体的な方法用意する画像は二通りのやり方があります。
1.飛行機や車のように同じ画像が左右（上下）に移動するタイプ。 背景と車等の2種類を用意して少しずつ動かした画像を別のファイル名で保存する。
2.少しずつ異なる画像をその動きの数だけ用意する。 作成は面倒ですがこちらの方が動きが自然に見えるかも。 保存する画像のフォーマットはGIFアニメーションを作るソフトに対応したものにします。
今回使用したソフトではBMP、jpg、GIF等多様なフォーマットに対応していましたのでjpgとしました。
私の場合は2.の方法で作成し、21枚の絵を用意しました。
わかりにくいのですがこのボルトの絵は3D作成ソフト(Shade8)を使って作りました。
用意した画像をGIFアニメーションソフトで結合します。
今回は、「古溝剛さんのサイト」から「Giam」というフリーソフトを利用させていただきました。
このソフトは複数の様々なフォーマットの画像からGIFアニメーションを作れるものです。コマ間の時間も任意に設定できます。さらに前後の画像を比較して同じ部分のデータを適正化してサイズを小さく納めてくれます。
このソフトに先ほどの21枚の画像を読み込みコマ間を少しゆっくりめに設定して「title.gif」として保存します。
タイトル画像をMovable Typeにアップロードして、テンプレートの任意の場所（メインページやアーカイブページ）のタイトルに記述します。
#banner { background-image:url(title.gif); } これでアニメーションバナーが出来上がりです。
コメント