JavaScriptとCSS(5)
JavaScriptとCSSの組み合わせでアニメーション効果をつける方法について、少し具体的なことを書きます。
例えば、ブロック要素が左から右へ移動する動きを表現する場合。
まず、動かしたいブロック要素(divタグなど)に、IDを付けておきます。<div id="hoge">~~</div>というように書きます。
JavaScriptで、IDにスタイルを指定します。ここで、 position:absolute; とし、開始時点の位置を決めます。
組み込みの関数でタイマーをセットして、一定時間後(例えば、100分の1秒後)に、スタイルを書き換えて1ドット分右にずらした位置を指定するようにします。
これで、ブロック要素が100分の1秒ごとに1ピクセルずつ右に移動するので、見た目にはスーっと左から右へ動くように見えます。
日時:2009年7月 2日 14:35
« 説得の3ポイント| ホームページTOPへ |七夕です »

