Javascriptの勉強。
カーソルを動かすたびにカラフルで可愛いハート💛が現れるアニメーションの実装方法を模写して学習しました！
カラフルで本当にかわいい…！
勉強に使用した動画：https://www.youtube.com/watch?v=I0R0T7p5oR8
記述したコードはこちら。
①index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Colorful Hearts On Mousemove</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script type="text/javascript">
document.addEventListener("mousemove", function(e){
let body = document.querySelector('body');
let heart = document.createElement("span");
let x = e.offsetX;
let y = e.offsetY;
heart.style.left = x + 'px';
heart.style.top = y + 'px';
let size = Math.random() * 100;
heart.style.width = 20 + size + 'px';
heart.style.height = 20 + size + 'px';
body.appendChild(heart);
setTimeout(function(){
heart.remove();
},2000);
})
</script>
</body>
</html>
②style.css
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
background: #000;
height: 100vh;
}
span{
position: absolute;
background: url(heart.png);
pointer-events: none;
width: 50px;
height: 50px;
background-size: cover;
transform: translate(-50%,-50%);
animation: animate 2s linear infinite;
}
@keyframes animate {
0% {
transform: translate(-50%,-50%);
opacity: 1;
filter: hue-rotate(0deg);
}
100% {
transform: tranlate(-50%, -1000%);
opacity: 0;
filter: hue-rotate(720deg);
}
}
addEventListenerとは？
→指定した対象について、特定のイベントが実行される度に関数の呼び出しや処理の設定ができる。
指定したターゲット.addEventListener("イベントの種別",function(){})
今回の場合は…
document.addEventListener("mousemove", function(e){
なので、mousemove（マウスカーソルが移動）した時にイベントが発火。
document.querySelector()とは？
→documentオブジェクトの（）内に記述された要素を取得。
今回の場合は、
let body = document.querySelector('body');
なので、「body」という要素を取得してbodyに代入している。
document.createElement()とは？
→ ()内のタグ名をもつ要素を生成して、メモリに保存する。
なので、
let heart = document.createElement("span");
「span」のタグ名を持つ要素を生成→heartに代入。
offsetとは？
event.offsetX → 要素内でのカーソル座標Xを取得
event.offsetY → 要素内でのカーソル座標Yを取得
eventをeと省略。
let x = e.offsetX;
let y = e.offsetY;
Math.random()とは？
→ 0以上1未満の乱数を表示。
なので、
let size = Math.random() * 100;
0以上1未満の乱数を表示させsizeに代入。100倍する。
appendChildとは？
→ 特定の親要素の中に要素を追加する。
要素を指定してその要素の子要素としてHTMLタグを追加する。
※追加される場所は親要素の閉じタグの直前。
setTimeoutとは？
→ 待ち時間後にfunctionを一度だけ実行するメソッド。
setTimeout(ファンクション、待ち時間)
なので、
setTimeout(function(){
heart.remove();
},2000);
2秒後にハートを消去する。