[JS] 마우스클릭 이펙트 & 애니메이션 효과

https://sweesweett.github.io/jsprac/

JS PRAC

마우스 클릭 이펙트 캡쳐

마우스 클릭 이펙트는 딱 index.html에만 해뒀다. setProperty를 사용해 각각의 원이 랜덤한 위치에서 랜덤한 크기에 랜덤한 지속시간을 갖도록 설정했다. 

처음에는 애니메이션을 어떻게 해야할 지 조금 이해가 되지않아서 left / top을 사용해 해당 마우스가 클릭하는 위치에 이벤트가 활성화 되도록 만들었다가 이후에 translate를 사용해 변경하였다. 애니메이션에 랜덤하게 delay를 줘서 약간 폭죽 느낌으로 하고싶었지만, 끊기는 느낌이있어서 설정하진 않았다.

수정 전에는 setProperty부분을 그냥 이벤트함수안에다 넣었지만, 그냥 따로 빼는게 나을 것 같아서 랜덤한 숫자를 부여하는 함수와, property를 정하는 함수를 따로 만들었다

JS코드

const colors = [
  '#ef5350',
  '#ec407a',
  '#ab47bc',
  '#7e57c2',
  '#42a5f5',
  '#26c6da',
  '#d4e157',
  '#ffee58',
  '#ff7043',
];//색상
document.addEventListener('click', (e) => {
  let x = e.clientX; // 마우스를 클릭했을 때의 x위치
  let y = e.clientY;// 마우스를 클릭했을 때의 y위치
  for (let i = 0; i < 5; i++) {// 생성되는 원의 갯수
    randomCircle(x, y);
  }
});
function randomRange(min, max) {//지정된 범위 안에서의  랜덤한 숫자!
  return Math.floor(Math.random() * (max - min) + min);
}
function randomCircle(x, y) {
  const circle = document.createElement('div');
  let width = randomRange(10, 70);
  circle.className = 'circle';
  circle.style.setProperty('--width', `${width}px`);
  circle.style.setProperty('--x', `${x - width + randomRange(-30, 30)}px`);
  circle.style.setProperty('--y', `${y - width + randomRange(-30, 30)}px`);
  circle.style.setProperty('--duration', `${randomRange(5, 10) * 100}ms`);
  circle.style.setProperty(
    '--color1',
    `${colors[Math.floor(Math.random() * colors.length)]}2b`
  );
  document.body.append(circle);
  setTimeout(() => document.body.removeChild(circle), 1000);// 사라지게하기
}

CSS

.circle {
  width: var(--width);
  height: var(--width);
  border-radius: 50%;
  background-color: var(--color1);
  border: 2px solid var(--color2);
  position: absolute;
  /* top: var(--y);
  left: var(--x); */
  top: 0;
  left: 0;
  z-index: 10;
  transform: translate(var(--x), var(--y));
  filter: drop-shadow(0px 2px 4px var(--color1));
  animation: pointer var(--duration) 1 ease-out;
  animation-fill-mode: forwards;
}
@keyframes pointer {
  0% {
    transform: translate(var(--x), var(--y)) scale(0.5);
  }
  50% {
    transform: translate(var(--x), var(--y)) scale(1);
  }
  100% {
    transform: translate(var(--x), var(--y)) scale(0);
  }
}

---

PRACTICE 애니메이션 효과

원래는 그냥 텍스트가 버티컬하게 열리는 걸 하고싶었으나 너무 심심해서 조금 그라디언트로 조금 화려하게? 반짝거림이 있게 변경하였다. 뭐 정확한지는 모르겠다 다만효과를 주고싶었따...

.practice__wrapper h2 {
  font-family: 'Black Han Sans', sans-serif;
  font-weight: 700;
  font-size: 50px;
  -webkit-background-clip: text;
  background-position: 50% 50%;
  color: transparent;
  background-repeat: no-repeat;
  margin: 10px;
  /* transition: all 0.7s ease-in; */
  animation: title 0.7s 1 ease-in;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
}
@keyframes title {
  0% {
    background-image: linear-gradient(
      90deg,
      rgb(139, 222, 255) 0%,
      rgb(20, 156, 210) 15%,
      rgb(59, 178, 225) 25%,
      rgb(95, 198, 238) 45%,
      rgb(95, 198, 238) 55%,
      rgb(0, 145, 202) 75%,
      rgb(18, 155, 209) 85%,
      rgb(139, 222, 255, 1) 100%
    );

    background-size: 0% 100%;
  }
  60% {
    background-image: linear-gradient(
      90deg,
      #62d3ff 0%,
      #0091ca 50%,
      #62d3ff 100%
    );
  }
  100% {
    background-image: linear-gradient(0deg, #0091ca, #0091ca);
    background-size: 100% 100%;
  }
}

애니메이션을 정말 마스터했다라고 말하기엔 조금 부족하다ㅎㅎ.... 어떡하지 나의실력?