背景

何やら入力を目で追従するようなサイトが流行っているので作ってみようと思った。

結論

こうなった
名称未設定.mov.gif

リンクは下記
http://hasito.com/kuma/

実装

メイン部分

コード全体は長いけど主は下記の部分のみだと思う…
kakushahenで単純に三角関数で角度を算出してから角度と斜辺の長さから目の位置を割り出して、
その結果をオブジェクトに入れてstyleとしてhtml上に展開しています。

    move(e){
        var kaku=(p1,p2)=>{
            return Math.atan2((p1.y-p2.y),(p1.x-p2.x)); 
        }
        var shahen=(r,l)=>{
            return {x:Math.cos(r)*l,y:Math.sin(r)*l};
        }
        var m1=shahen(kaku(e,bme1_p),me_size);
        var m2=shahen(kaku(e,bme2_p),me_size);
        self.styles['meb1']={
            top:(bme1_p.y+m1.y)+ "px",
            left:(bme1_p.x+m1.x)+"px"
        };
        self.styles['meb2']={
            top:(bme2_p.y+m2.y)+ "px",
            left:(bme2_p.x+m2.x)+"px"
        };
        self.update();
    }

ソース全体

<kuma>
    <div onmousemove={move} style={styles['body']}>
        <div class="kao"></div>
        <div class="mimi p1"></div>
        <div class="mimi p2"></div>
        <div class="me p3"></div>
        <div class="me p4"></div>
        <div class="bme p5" style={styles['meb1']}></div>
        <div class="bme p6" style={styles['meb2']}></div>
    </div>
<style>
.kao {
    border-radius: 50%;
    height: 300px;
    width: 300px;
    top:100px;
    left:100px;
    background-color:#666;
    position:absolute;
}
.mimi {
    border-radius: 50%;
    height: 100px;
    width: 100px;   
    background-color:#666;
    position:absolute;
}
.me {
    border-radius: 50%;
    height: 100px;
    width: 100px;   
    background-color:#eee;
    position:absolute;
}
.bme {
    border-radius: 50%;
    height: 50px;
    width: 50px;   
    background-color:#000;
    position:absolute;
    transition:0.2s;
    -webkit-transition: 0.2s;
}
.p1{top:100px;left:100px;}
.p2{top:100px;left:300px;}
.p3{top:150px;left:130px;}
.p4{top:150px;left:270px;}
.p5{top:175px;left:155px;}
.p6{top:175px;left:295px;}

</style>
<script>
    var self  = this;
    self.styles={};
    var bme1_p={y:175,x:155};
    var bme2_p={y:175,x:295};
    var me_size=25;
    self.styles['body']={
        update:function(){
            this.height= window.innerHeight + 'px';
            this.width= window.innerWidth + 'px';
        },
        height:"0px",
        width:"0px",
        'background-color':'#333',
        margin: '0px',
        display: 'block'
    };
    move(e){
        var kaku=(p1,p2)=>{
            return Math.atan2((p1.y-p2.y),(p1.x-p2.x)); 
        }
        var shahen=(r,l)=>{
            return {x:Math.cos(r)*l,y:Math.sin(r)*l};
        }
        var m1=shahen(kaku(e,bme1_p),me_size);
        var m2=shahen(kaku(e,bme2_p),me_size);
        self.styles['meb1']={
            top:(bme1_p.y+m1.y)+ "px",
            left:(bme1_p.x+m1.x)+"px"
        };
        self.styles['meb2']={
            top:(bme2_p.y+m2.y)+ "px",
            left:(bme2_p.x+m2.x)+"px"
        };
        self.update();
    }
    window.onresize = ()=>{
        self.styles['body'].update();
        self.update();
    }
    window.onresize();
</script>
</kuma>
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.