$('.ripple-container').on('mouseover', function(e) {
// 물결 효과 요소 생성
var $ripple = $('');
// 컨테이너의 위치와 크기 계산
var offset = $(this).offset();
var width = $(this).width();
var height = $(this).height();
// 마우스 위치를 컨테이너 내부 기준으로 계산
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
// 물결 효과의 크기를 컨테이너의 대각선 길이로 설정(최대값)
var diameter = Math.max(width, height);
$ripple.css({
width: diameter,
height: diameter,
top: y - diameter / 2,
left: x - diameter / 2
});
// 기존의 물결 효과가 있으면 제거
$(this).find('.ripple').remove();
$(this).append($ripple);
// 애니메이션이 끝난 후 요소 제거
setTimeout(function() {
$ripple.remove();
}, 600);
});
