お電話でのお問い合わせ
電話をかける
電話をかける メニューボタン
学習コンセプトカリキュラム・料金教室紹介無料体験授業

フタバゼミ
ゼミノート

【JavaScript】キャットモーション

さて、前回つくりました自動スライドで写真を紹介するページ

この仕組みを使って、ひとつループアニメーションを作ってみましょう。

作品名はキャットモーション。

リアルなアニメーションを作るには、まず画像をたくさん用意しなければなりません。

多ければ多いほどリアルに見えるわけですが、今回は8枚の画像を用意しました。

もちろん、画像サイズはすべて同じに。

ではプログラムを書いていきましょう。

まずは、関数startを作り、処理内容には、motion()を0.1秒おきに表示する仕組みを。

motion()のうしろの1000の単位はミリ秒ということでした。

ここでは0.1秒になります。

続いて、motionも定義していきましょう。

8枚の写真を「%(割った余り)」を使ってループカウント。

(i % 3 == 0) 変数iを割った余りが0ならcat01.png
(i % 3 == 1) 変数iを割った余りが1ならcat02.png
(i % 3 == 2) 変数iを割った余りが2ならcat03.png ・・・

続いて、start()を実行するタイミング。

ここでは、ブラウザを開いた時にロードさせました。

JavaScriptプログラミングで、動きのあるWEBページ。

こうしたループ表示の仕組みは、ホームページを作るとき、いろいろなアイデアで活用できそうですね。