그럼에도 불구하고

👨‍💻

mousemove 이벤트로 색 변환하기 본문

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>

     

     

     

    ※ 화면 크기 및 확대, 축소 비율에 따라 event.pageX의 범위가 다르기 때문에  const num =parseInt(event.pageX / ? ); 

    ? 는 개별 지정 필요 

    저작자표시 비영리 (새창열림)

    'JavaScript > Function implementation' 카테고리의 다른 글

    "selectstart" 글자 돋보기 만들기  (0) 2023.01.10
    아날로그 시계 만들기  (0) 2023.01.07
    FileReader 객체 사용하여 image 올리기  (0) 2023.01.05
    배열 무작위 섞기 (셔플)  (0) 2023.01.05
    array.sort() 오름차순, 내림차순 정렬하기  (0) 2023.01.04
    'JavaScript/Function implementation' Related Articles more
    Comments