Ripple Effect

보통

클릭 위치에서 퍼지는 물결 효과

#effect#ripple#click#interactive

라이브 데모

클릭하여 물결 효과 생성

코드

RippleEffect.tsx

export const RippleEffect = () => {
  const [ripples, setRipples] = useState([]);

  const createRipple = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const newRipple = { x, y, id: Date.now() };

    setRipples((prev) => [...prev, newRipple]);
    setTimeout(() => {
      setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));
    }, 1000);
  };

  return (
    <div onClick={createRipple}>
      {ripples.map((ripple) => (
        <span key={ripple.id} className="ripple" style={{ left: ripple.x, top: ripple.y }} />
      ))}
    </div>
  );
};

effects.css

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  animation: ripple-expand 1s ease-out;
}

@keyframes ripple-expand {
  from {
    width: 0;
    height: 0;
    opacity: 1;
  }
  to {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}