犬の画像を回した

とある万年筆メーカのページで,スクロールに合わせて画像を動かしている部分があり,うちのサイトでも似たようなことをやってみたいと思った.
ただ,良いアイデアが浮かばず,とりあえずスクロールに合わせて犬の画像を回すことにした.

s_co (1)
使う画像は上のやつ.
スクロールの検出にはWheelEventを使う.スクロールされたら向きによって5度ずつ傾ける.
 
cssは以下のようにした.
使用する画像が透明と黒なので背景をgrayにして,画像自体は画面の右下に出るようにした.
35pxっていうのは,画像が斜めになったときに描画範囲からはみ出るのを防ぐため.
画像が正方形で1辺の長さがxなら,だいたい(√2-1)x/2くらいの余裕を持っておけば良さそう?

 
jsは以下の様な感じ.
スクロールしたら向きに合わせてdpw(ここでは5)度ずつ画像を回転させている.
dpwの値はなんとなく決めた.
e.preventDefault()はデフォルトのスクロールを無効にするためのもの.

 
htmlは以下.
cssとjs読み込んで,画像を表示させているだけ.

 

デモ