반응형
- 2023-11-29 : First posting.
<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
반응형
http/https 링크및 수식 (\ [ Outline 수식 \ ],\ ( inline 수식 \ )::\이후 띄어쓰기 없이) 을 넣으실 수 있습니다. 또한 code 는```시작,```/마지막으로 감싸 주시면 pretty-printed 되어서 나타납니다.```[.lang-js.scrollable.no-linenums]같이 언어를 선택해 주실수도 있고, 긴 수식의 경우 scroll bar 가 생기게 만드실 수도 있습니다. .no-linenums 로 line numbering 을 없앨수도 있습니다.댓글 입력 후 rendering 된 형태를 보시려면, Handle CmtZ (단축키: N) 버튼을 눌러주세요. 오른쪽 아래 Floating Keys 에 있습니다. 아니면 댓글 젤 아래에 버튼이 있습니다.