jQuery.ripples - 이미지에 물결 그래픽 효과 주기

# jQuery.ripples - 이미지에 물결 그래픽 효과 주기 최근에 구글링을 하다가 블로그를 엄청 예쁘게 꾸미시고 글 퀄리티도 매우 뛰어난데를 발견했는데, 거기서 신기한게 있어서 나도 배우기 및 적용해볼겸 작성하는 글. ## PH

• 2023-11-29 : First posting.

## TOC ## jQuery.ripples.js jQuery 라이브러리니 당연히 jQuery 가 선행되어야 하고, 실행 메소드 하나만 해주면 바로 적용이 된단다. 유의 할점은 이미지는 <img> 태그가 아닌 css의 background-url 속성으로 적용되어야 한다고 한다. (객체 속성으로도 명시할 수 있음.) 아마도 그냥 img 로 load 되면 속성을 변화시키면서 img 를 바꾸는게 막혀서 그런듯 하다. (.gif 로 하면 더 멋질거 같아서 적용해 봤는데, background-url 로 설정하면 움직이진 않는듯.) ```[.linenums.lang-html#pre-code-ripples] ```/ ```[.linenums.lang-html] <style> #image-ex {max-width:100%; width:100%; height:100vh !important; background:url(https://i.imgur.com/r3RMdYs.gif) no-repeat center; background-size:cover} #framesContainer {max-width:100%; width:100%; height:100vh !important; background:url(https://i.imgur.com/r3RMdYs.gif) no-repeat center; background-size:cover} </style> <img id="image-ex0" src="https://i.imgur.com/r3RMdYs.gif"> <div id="image-test0" style="max-width:100%; width:100%; height:100vh !important; background:url(https://i.imgur.com/r3RMdYs.gif) no-repeat center; background-size:cover"></div> <div id="image-ex"></div> <div class="p"></div> framesContainer <div id="framesContainer"></div> <div id="image-test" style="max-width:100%; width:100%; height:100vh !important; background:url(https://i.imgur.com/r3RMdYs.gif) no-repeat center; background-size:cover"></div> ```/

framesContainer

## 변수들 변수들은 가서 보시고 참조하세요. ## RRA

1. https://inpa.tistory.com/entry/jQuery-Ripple-📚-이미지에-물결-그래픽-효과