1. /
  2. /
  3. 犬の画像を回した

犬の画像を回した

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

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

body{
        background-color: gray;
}
#pome{
        position:absolute;
        bottom:35px;
        right:35px;
}

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

var deg=0;
var dpw=5;//degree per wheel
if(window.WheelEvent){
        document.addEventListener("wheel",function(e){
                e.preventDefault();
                deg+=e.deltaY>0?dpw:-dpw;
                var img=document.getElementById("pome");
                img.style.transform="rotate("+deg+"deg)";
        });
}

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

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <link rel="stylesheet" href="./style.css" type="text/css" />
                <script src="./script.js" type="text/javascript"></script>
                <title>pome's box</title>
        </head>
        <body>
                <img id="pome" src="./pome.png" />
        </body>
</html>

 

デモ