マウスを乗せたら画像が上からみょ～んと降りてくる JavaScript を作ってみました

マウスを乗せたら画像が上からみょ～んと降りてくる JavaScript を作って、以下のサイトに適用してみました。



サービス一覧
http://drupa.jpn.org/

各ページのリンクの上にマウスポインターを乗せると、そのサイトのアイコン画像がページの右側の部分に、上からみょ～んと降りてきます。


実際の動作している様子を撮影して、YouTube にアップロードしました。

マウスを乗せたら画像が上からみょ～ん 
https://www.youtube.com/watch?v=dLeRtvvWhQA&feature=youtu.be



そのページの CSS と JavaScript と HTML は以下のようになっています。
CSS と HTML は必要な部分のみ抜き出しています。

CSS

.s-image 
{
    position:fixed;
    left:750px;
    top:0px;
    width:900px;
}  

JavaScript

<script type="text/javascript">
<!--    
    var def_image = "drupa_jpn_orz.png";
    onload = function () {
        setMainPic(def_image);
    }
    
    function setMainPic(img) {

        var obj = document.getElementById("main-pic");
        obj.src = img;

        frame = 0;
        if ( !is_anime ) {
            is_anime = true;
            mainPic_anime();
        }
    }

    var frame;
    var is_anime = false;
    var max_frame = 30;
    var fps = 60;
    var frame_time = 1000 / fps;
    function mainPic_anime() {

        var obj = document.getElementById("main-pic");
        var top = -1000 * (Math.pow(max_frame - frame, 5) / Math.pow(max_frame, 5) );
        obj.style.top = top + "px";

        frame++;
        if (frame < max_frame) {
            setTimeout(mainPic_anime, frame_time);
        } else {
            is_anime = false;
        }
    }
//-->
</script>

setMainPic を呼び出すと、画像を変更します。
そして、変更された画像が上からみょ～んと降りてきます。

setMainPic の中で mainPic_anime を呼び出しており、mainPic_anime がタイマによって定期的に呼び出されることでアニメーションを実現しています。

累乗関数(Math.pow）を使うことで上からみょ～んと降りてくる動作を実現しています。
累乗関数は第１引数の値を、第２引数の値の数だけかける動作をしているので、今回は第２引数に 5 を設定しているので、5 回分第１引数がかけられています。

第１引数*第１引数*第１引数*第１引数*第１引数 = 第１引数^5

私の感覚では、5 よりも小さくしてしまうとどうしても動きが緩慢に見えてしまいます。
上からみょ～んと降りてきて、ささっという感じで止まる動きだと 5 が良さそうに見えました。


ちなみに、Math.pow(max_frame - frame, n) / Math.pow(max_frame, n) の計算結果を、n ごとに分けてプロットした図を以下に示します。

Math.pow(max_frame - frame, n) / Math.pow(max_frame, n) のプロット結果

n が大きいほど、急に値の減少を示した後、ゆっくりと 0 に近づいていくことがわかります。
これが、上からみょ～んと降りてきて、ささっという感じで止まる動きの秘訣です。


アニメーション動作中に、マウスがリンクから離れたり、別のリンクに乗ったりしたときのために、アニメーション中かどうかをフラグで管理しており、アニメーション中ではない場合のみ、新規にタイマーを起動しています。
そうしないと、何重にもタイマーが起動したりして、処理が激重になってしまう可能性があります。

HTML

<div class="s_group">
    <h1>双方向コミュニティサイト</h1>
<img src="syumatsu/syumatsu_icon.png" class="s-icon"/>
<h2><a href="syumatsu/" onmouseover="setMainPic('syumatsu/syumatsu_icon.png')" onmouseout="setMainPic(def_image)">今週末の予定を共有しよう！</a></h2>
<p>このサイトで今週末の予定をみんなで共有しましょう！<br />
みんなでより良い週末を過ごしましょう！</p>
</div>

<!-- 省略 -->

<img class="s-image" id="main-pic"/>

マウスがリンクに乗った時（onmouseover）、リンクに関係する画像を設定しています。
マウスがリンクから離れた時（onmouseout）、元の画像を設定しています。

img タグ（id="main-pic"）がみょ～んと降りてくる画像を表示している本体になります。
CSS でブラウザの右側に常に表示されるように固定しています。

まとめ

それぞれのリンクにマウスポインターを乗せた時に出てくる画像は低解像度のため、ここまで大きく拡大すると結構汚いです。

作業の空き時間があれば、高解像度版を用意するか、SVG のようなベクトル画像を使うか、もしくは、まったく別の画像（各ページのレンダリング画像など）を使用するように変更するかもしれません。


今回は、上からみょ～んと気持ちよく降りてくる部分に力を注いでみました。