JavaScript/Function implementation
mousemove 이벤트로 색 변환하기
zenghyun
2023. 1. 6. 21:07
mousemove 이벤트로 색 변환을 해보자
조건
1. 마우스를 움직일 때마다 화면의 색이 바뀜
2. 왼쪽, 오른쪽 여부 상관없이 바뀜
3. 화면의 색은 Math.random() 메서드 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
text-align: center;
font-size: 100px;
line-height: 100vh;
opacity: 0;
transition: opacity 0.3s;
}
</style>
</head>
<body>
<div class="container">
<div class="box box01">box01</div>
<div class="box box02">box02</div>
<div class="box box03">box03</div>
<div class="box box04">box04</div>
<div class="box box05">box05</div>
<div class="box box06">box06</div>
<div class="box box07">box07</div>
<div class="box box08">box08</div>
<div class="box box09">box09</div>
<div class="box box10">box10</div>
<div class="box box11">box11</div>
<div class="box box12">box12</div>
<div class="box box13">box13</div>
<div class="box box14">box14</div>
<div class="box box15">box15</div>
<div class="box box16">box16</div>
<div class="box box17">box17</div>
<div class="box box18">box18</div>
<div class="box box19">box19</div>
<div class="box box20">box20</div>
</div>
<script>
const sliders = document.querySelectorAll('.box');
sliders.forEach(box => {
const hue = Math.floor(Math.random() * 360);
box.style.backgroundColor = `hsl(${hue}, 100%, 80%)`;
})
window.addEventListener('mousemove', event => {
sliders.forEach(box => {
box.style.opacity = 0;
})
const num = parseInt(event.pageX / 100);
sliders[num].style.opacity = 1;
})
</script>
</body>
</html>
See the Pen Untitled by zenghyun (@zenghyun) on CodePen.
※ 화면 크기 및 확대, 축소 비율에 따라 event.pageX의 범위가 다르기 때문에 const num =parseInt(event.pageX / ? );
? 는 개별 지정 필요