菖蒲の節句を祝う

 

右下のはじめボタンをクリックしてスタートです。Low-speedとHigh-speedボタンで矢車の回転数と風の効果音を制御することができますが回転球とこいのぼりの動きは一定です。

枠で囲まれたボタンの上にカーソルをかざし（マウスオーバー）てください。

矢羽根の付いた矢車は左図のように、画面に平行でなく垂直方向に回転するものですが、アピール度を上げるために90度傾けてあります。

小生の幼少時には見かけなかったものですが、中央の回転球や2つの矢車はいつ頃から普及したものなのか。経済生活が豊かになってひたすら子供の成長に心を配れる雰囲気が生まれた証でしょうか。

 

余談

回転球とこいのぼりの回転制御はanimation:rotateを使っていますが、矢車を回転させる制御はtransform:rotateを用いています。これは動的に遅滞なく矢車の回転を制御するためです。

一定間隔でrotateを指定する場合、setTimeoutかsetInterval関数を使いますが、今回のように回転スピードを動的に更新する場合は、setTimeoutを利用します。

尚、回転球はY軸の周りを回転するものであり、単なるrotateYによる制御は平らな板を回転するような感じで臨場感がありません。

ここでは立体感を出すためにサイコロを回転させるサンプルを例にして4枚の画像を重ね合わせています。