HTML、CSS、jQueryで目が動ける猫を作りましょう

# 目がカーソルの方向に動く猫
HTML、CSS、jQueryで、目がカーソルの方向に動く猫の作り方を紹介します。
## HTML
まず、HTMLの書き方を紹介します。耳、顔、目、鼻、ひげなどいくつかのdivを作ります。最後にjQueryライブラリとJavaScriptファイルを読み込みます。jQueryはJavaScriptを簡単に書けるようにするためのライブラリで、HTML文書の操作、イベント処理、アニメーション、Ajax通信などを簡単に実装できます。
```ruby:qiita.rb
<!DOCTYPE html>

<head>
    <title>Cat</title>
    <link href="./cat.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="cat">
        <div class="ear left"></div>
        <div class="ear right"></div>
        <div class="face">
            <div class="eye-white left">
                <div class="eye-ball"></div>
            </div>
            <div class="eye-white right">
                <div class="eye-ball"></div>
            </div>
            <div class="nose"></div>
            <div class="beard-left one"></div>
            <div class="beard-left two"></div>
            <div class="beard-left three"></div>
            <div class="beard-right one"></div>
            <div class="beard-right two"></div>
            <div class="beard-right three"></div>
        </div>
    </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="cat.js"></script>
</body>

</html>
```
## CSS
次は、CSSで各パーツの形や色、位置を設定します。ここで*（全要素セレクタ）に対して、余白やパディングをすべてゼロにしています。bodyの高さを100%にし、フレックスボックスで中央揃えしています。背景には、水色から青に変わるグラデーションが適用されています。border-radiusの値を調整して、耳や顔、目、鼻、ひげの形にします。猫のひげを左右にそれぞれ3本ずつ配置して、角度をつけて自然な表現にしています。さらに、box-shadowで耳や顔に薄い影をつけて少し立体的に仕上げます。
```ruby:qiita.rb
* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(#daf9ff, #48cae4);
}

/* 猫 */
.cat {
    position: relative;
    width: 200px;
}

/* 耳 */
.ear {
    width: 60px;
    height: 100px;
    background-color: #343a40;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: -8px;
}

.ear.left {
    border-radius: 40% 80%;
}

.ear.right {
    right: 0;
    border-radius: 80% 40%;
}

/* 顔 */
.face {
    width: 200px;
    height: 200px;
    background-color: #000000;
    border-radius: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

/* 白目 */
.eye-white {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 100%;
    position: absolute;
    top: 68px;
}

.eye-white.left {
    left: 38px;
}

.eye-white.right {
    right: 38px;
}

/* 瞳 */
.eye-ball {
    width: 20px;
    height: 20px;
    background-color: #000;
    border-radius: 100%;
    position: absolute;
    left: 5px;
    top: 5px;
}

/* 鼻 */
.nose {
    width: 25px;
    height: 18px;
    background-color: #ffd1dd;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 65px;
    border-radius: 42px 42px 60px 60px / 30px 30px 60px 60px;
}

/* ひげ */
.beard-left {
    width: 40px;
    height: 3px;
    background-color: white;
    border-radius: 5px;
    position: absolute;
    left: 0;
}

.beard-left.one {
    bottom: 90px;
    transform: rotate(15deg);
}

.beard-left.two {
    bottom: 75px;
}

.beard-left.three {
    bottom: 60px;
    transform: rotate(-15deg);
}

.beard-right {
    width: 40px;
    height: 3px;
    background-color: white;
    border-radius: 5px;
    position: absolute;
    right: 0;
}

.beard-right.one {
    bottom: 90px;
    transform: rotate(-15deg);
}

.beard-right.two {
    bottom: 75px;
}

.beard-right.three {
    bottom: 60px;
    transform: rotate(15deg);
}
```
猫がだいぶ完成しました。最後は目の動きですね！

![スクリーンショット_15-10-2024_114746_.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3910429/fc23b9a3-bbb1-600e-9808-96cf86a607dd.jpeg)
## jQuery
最後に、猫の目がカーソルの方向に行くように、jQueryのコードを書きます。
マウスの位置をドキュメントの幅と高さに対する比率で計算し、その比率に基づいてeye-ball要素のleftとtopのCSSプロパティを変更します。こうして、マウスが動くたびに、eye-ball要素の位置をマウスの位置に基づいて更新します。つまり、マウスに追従する動きを実現します。
```ruby:qiita.rb
$(document).on('mousemove', function (e) {
    let dw = $(document).width() / 20;
    let dh = $(document).height() / 20;
    let x = e.pageX / dw;
    let y = e.pageY / dh;
    $('.eye-ball').css({
        left: x,
        top: y
    })
})
```
## 効果
![ビデオ プロジェクト.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3910429/25172dde-2b78-41ab-7eb4-7e7141284902.gif)