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> $("#image-ex0").ripples({ // NOT working! resolution:1024, // 렌더링 값이 클수록 잔물결 효과가 느리게 전파. ms 단위일듯? perturbance:0.04, // 잔물경 굴절 강도. 0은 굴절 없음 }); <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> $image_ex.ripples({ resolution:1024, // 렌더링 값이 클수록 잔물결 효과가 느리게 전파. ms 단위일듯? perturbance:0.04, // 잔물경 굴절 강도. 0은 굴절 없음 dropRadius: 20, // Adjust drop radius as needed }); <div id="image-ex"></div> <div class="p"></div> framesContainer <div id="framesContainer"></div> $("#image-test").ripples({ resolution:512, // 렌더링 값이 클수록 잔물결 효과가 느리게 전파. ms 단위일듯? perturbance:0.07, // 잔물경 굴절 강도. 0은 굴절 없음 dropRadius: 50, // Adjust drop radius as needed }); $("#image-test").on("touchmove", function (e) { // Scroll 방지. e.preventDefault(); e.stopPropagation(); }); <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> ```/ $("#image-ex0").ripples({ // NOT working! resolution:1024, // 렌더링 값이 클수록 잔물결 효과가 느리게 전파. ms 단위일듯? perturbance:0.04, // 잔물경 굴절 강도. 0은 굴절 없음 });

$image_ex.ripples({ resolution:1024, // 렌더링 값이 클수록 잔물결 효과가 느리게 전파. ms 단위일듯? perturbance:0.04, // 잔물경 굴절 강도. 0은 굴절 없음 dropRadius: 20, // Adjust drop radius as needed });

framesContainer

$("#image-test").ripples({ resolution:512, // 렌더링 값이 클수록 잔물결 효과가 느리게 전파. ms 단위일듯? perturbance:0.07, // 잔물경 굴절 강도. 0은 굴절 없음 dropRadius: 50, // Adjust drop radius as needed }); $("#image-test").on("touchmove", function (e) { // Scroll 방지. e.preventDefault(); e.stopPropagation(); });

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

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