目がカーソルの方向に動く猫
HTML、CSS、jQueryで、目がカーソルの方向に動く猫の作り方を紹介します。
HTML
まず、HTMLの書き方を紹介します。耳、顔、目、鼻、ひげなどいくつかのdivを作ります。最後にjQueryライブラリとJavaScriptファイルを読み込みます。jQueryはJavaScriptを簡単に書けるようにするためのライブラリで、HTML文書の操作、イベント処理、アニメーション、Ajax通信などを簡単に実装できます。
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で耳や顔に薄い影をつけて少し立体的に仕上げます。
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);
}
猫がだいぶ完成しました。最後は目の動きですね！
jQuery
最後に、猫の目がカーソルの方向に行くように、jQueryのコードを書きます。
マウスの位置をドキュメントの幅と高さに対する比率で計算し、その比率に基づいてeye-ball要素のleftとtopのCSSプロパティを変更します。こうして、マウスが動くたびに、eye-ball要素の位置をマウスの位置に基づいて更新します。つまり、マウスに追従する動きを実現します。
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
})
})
効果
