[jquery플러그인]마우스로 배경이미지에 물결을 일으키는 효과를 주는 water-ripple 플러그인

*대로 적용되지 않는다면 서버에 이미지파일과 플러그인을 적용할 html 파일이 올려져 있는지 확인.. 그냥 로컬에서는 제대로 적용되지 않는다.. 아니면 코드펜이나 vscode의 라이브서버 같은 기능을 활용 

 

 

적용방법은 아주 간단하다

 

 

 

 

필요한 파일은 

jquery 파일과 플러그인의 js 파일이 필요하다.

https://www.jqueryscript.net/demo/jQuery-Plugin-For-Water-Ripple-Animation-ripples/js/jquery.ripples.js

 

 

원하는 영역에 ripples함수를 이용해 옵션값을 설정해주면 마우스의 움직임이나 클릭에 따라 물결과 파동이 일어난다.

이때 wave에 배경이미지가 있어야 정상적으로 작동한다.

$('.wave').ripples({
			resolution: 256,
			perturbance: 0.04
		});

 

 

글자가 나타나면서 파동의 효과를 주고 싶었다.. 

 

그래서 파동을 준 영역 wave 안에 span으로 텍스트 영역을 주었다. 

$(".wave span").on('mousedown',function(e){
  e.offsetX=380;
  e.offsetY=200;
});

$(".wave spna").fadeIn(500);
$(".wave spna").trigger('mousedown');

플러그인에 mousemove와 mousedown으로 이미 정의가 되어있어서 trigger를 이용해 이벤트를 발생시킨다.

단지 영역에서 이벤트만 발생하기 때문에 이벤트가 발생하는 위치는 값이 없다. 

파동이 일어나는 위치는 이벤트가 발생하는 위치이기 때문에 위치값을 주어야한다.  글자의 위치에 영역을 맞춰준다.

e.offsetX=380;
e.offsetY=200;

 

이렇게하면 글자가 fadeIn될때 mousedown을 trigger로 발생시켜 위치를 잡아주었기 때문에 그부분에 파동이 발생된다. 

 

 

위의 내용까지 적용하면 글자에도 파동이 일어나지만 해당 영역에 마우스 이벤트에 따라 또다른 파동이 일어난다.

이를 막기위해서는 아래와같이 투명한 div를 이용해 마우스 이벤트가 발생하는 것을 막을 수 있다.

 

 

 

 

https://www.jqueryscript.net/animation/jQuery-Plugin-For-Water-Ripple-Animation-ripples.html

jQuery Plugin For Water Ripple Animation - ripples