클릭하면 랜덤하게 생성되는 div 박스

클릭할 때마다 클릭한 위치로 div 박스가 생성되는 코드다. 이때 크기나 컬러, 투명도 등은 모두 랜덤하게 적용했고, 애니메이션은 그린삭 라이브러리를 활용해서 적용했다.

화면 클릭시 실행되는 onClick 함수를 만들고

window.addEventListener("click", onClick);

onClick 함수 안에 모든 코드를 작성한다. 이때 랜덤 값을 만들기 위해 수학 메소드인 Math.random, Math.floor 를 활용한다. 하나는 0에서 1사이의 숫자를 랜덤으로 가져오고 하나는 소수점을 반올림 해주는 역할을 한다. 0에서 1사이 소숫점 숫자이므로 숫자를 곱해서 원하는 범위의 숫자값이 랜덤하게 나오게 조절해주어야 한다.

function onClick(e) {
  let circle = document.createElement("div");
  let radius = Math.floor(Math.random() * 150 + 50);
  let r = Math.floor(Math.random() * 256);
  let g = Math.floor(Math.random() * 256);
  let b = Math.floor(Math.random() * 256);
  let opa = Math.random() * 0.9 + 0.1;

  circle.style.position = "absolute";
  circle.style.opacity = opa;
  circle.style.width = radius + "px";
  circle.style.height = radius + "px";
  circle.style.borderRadius = "50%";
  circle.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
  circle.style.left = e.pageX - radius * 0.5 + "px";
  circle.style.top = e.pageY - radius * 0.5 + "px";
  circle.style.transform = "scale(0,0)";
  gsap.to(circle, {  //그린 삭 라이브러리 적용 부분
    scale: 1,
    ease: "elastic.out(1, 0.3)",
    duration: 1.5,
  });

  document.body.appendChild(circle); // 화면에 해당 circle 을 추가한다.
}