jQueryで歩くアニメーションに挑戦 | スターフィールド株式会社jQueryを使ってFlashのようなアニメーションを目指す練習として、 歩くアニメーション作りに挑戦しました。 作り方 1.背景画像を準備する 今回は遠近感を出すために、遠くの背景から近くの背景に向かうにつれて、 早くアニメーションするようにします。 そのため、近くの背景ほど、長さのある背景にしました。 重ねて表示するので、PNGで書き出しました。 動かない背景 一番遠くの山 近くの山 一番近くの山 道(一番手前の背景) 2.歩く人の画像を準備する 今回は簡単に、２コマで歩いている状態を表現することにしました。 人物の高さを上下させると歩いている様子が伝わりやすいです。 3.HTMLを準備する “view”というoverflow:hiddenにしたボックスの中に、背景をposition:absoluteで順番に重ね、 最前面の人は、画像を切り替えるので、CSSのbackgroundでファ
