Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@70days_js

年末まで毎日webサイトを作り続ける大学生 〜49日目 サイトを10*10に区切って、マウスを動かすと背景も変わる〜

More than 1 year has passed since last update.

はじめに

こんにちは!@70days_jsです。

サイトを10*10に区切って、マウスが動くと背景も変わるようにしました。
ほぼ全部JavaScriptを使っています。

今日は49日目。(2019/12/6)
よろしくお願いします。

サイトURL

やったこと

伝えづらいんですが、映像を見れば一発だと思います。
こんな感じです。↓
test3.gif

htmlはdivを一つ用意するだけです。↓

  <body>
    <div id="mouseMove"></div>
  </body>

JavaScript全文↓

let mouseMove = document.getElementById("mouseMove");
let innerWidth;
let innerHeigt;

innerHeigt = window.innerHeigt;
innerWidth = window.innerWidth;
height10 = innerHeight / 10;
width10 = innerWidth / 10;

for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    let div = document.createElement("div");
    div.setAttribute("class", "color");
    div.style.top = height10 * i + "px";
    div.style.left = width10 * j + "px";
    randomColor(div);
    mouseMove.appendChild(div);
  }
}

mouseMove.addEventListener("mousemove", function(e) {
  let getClass = document.getElementsByClassName("color");
  for (var i = 0; getClass.length > i; i++) {
    randomColor(getClass[i]);
  }
});

function randomRGB() {
  let r = Math.floor(Math.random() * 256);
  let g = Math.floor(Math.random() * 256);
  let b = Math.floor(Math.random() * 256);
  let rgb = [r, g, b];
  return rgb;
}

function randomColor(element) {
  let rgb = randomRGB();
  let r = rgb[0];
  let g = rgb[1];
  let b = rgb[2];
  element.style.backgroundColor = "rgba(" + r + ", " + g + "," + b + ", .3)";
}

サイズを取って/10をして10分割を実現しています。↓

innerHeigt = window.innerHeigt;
innerWidth = window.innerWidth;

10*10のdivを作っています。↓

for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
let div = document.createElement("div");
div.setAttribute("class", "color");
div.style.top = height10 * i + "px";
div.style.left = width10 * j + "px";
randomColor(div);
mouseMove.appendChild(div);
}
}

マウスが動くごとに 背景を変えています。↓

mouseMove.addEventListener("mousemove", function(e) {
let getClass = document.getElementsByClassName("color");
for (var i = 0; getClass.length > i; i++) {
randomColor(getClass[i]);
}
});

最後にcss全文↓

body {
  margin: 0;
  overflow: hidden;
}

#mouseMove {
  height: 100vh;
  width: 100vw;
}

.color {
  background-color: red;
  position: absolute;
  width: 10%;
  height: 10%;
}

ポイントは

position: absolute;
width: 10%;
height: 10%;
}

この3行だけです。

感想

マウスを動かす系にはまってしまいました。
そろそろpromiseとか、技術的な方向を掘っていきたいと思います。

最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
70days_js
スキルアップのために年末まで毎日webサイトを作ります。 開始: 2019/10/19~

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?