js 물결이미지 게시글 적용하기 정보
js 물결이미지 게시글 적용하기
관련링크
본문
제가 돈도 안 되는 뻘짓거리를 좀 하였습니다.^^
이미지원본
https://blog.kakaocdn.net/dn/bUcoy1/btsAp4mmsHN/3Pjd5MNCevGG0E59T8xFtK/img.png
https://blog.kakaocdn.net/dn/cPRKD0/btsAp0ddADF/9Bvig4SHHuVAMQoImyjhbk/img.png
----------
아래코드를 view.skin.php 의 하단이나 view.tail.skin.php 에 입력합니다.
<script>
if (typeof document.querySelectorAll(".wave-80")[0] == "object") {
document.write(`
<style>
.wave-80 { position:relative; overflow:hidden; margin:0 auto; }
.wave-80 img { display:block; width:100%; }
.wave-80 img:nth-of-type(2) { position:absolute; top:-1px; -webkit-mask-size:100% 80px; mask-size:100% 80px; }
</style>
`);
wave80Mode = [[0, 0, 40], [0, 10, 50], [0, 20, 60], [0, 30, 70], [0, 40, 80], [10, 50, 80], [20, 60, 80], [30, 70, 80]];
function img80Wave(...wave) {
wave[0].style.WebkitMaskImage = wave[0].style.maskImage = "linear-gradient(transparent " + wave80Mode[wave[1]][0] + "px, #000000 " + wave80Mode[wave[1]][0] + "px " + wave80Mode[wave[1]][1] + "px, transparent " + wave80Mode[wave[1]][1] + "px " + wave80Mode[wave[1]][2] + "px, #000000 " + wave80Mode[wave[1]][2] + "px)";
}
waveNumber = 0;
for (i of document.querySelectorAll(".wave-80")) {
i.insertAdjacentHTML("beforeend", "<img src='" + i.querySelectorAll("img")[0].src + "'>");
img80Wave(i.querySelectorAll("img")[1], waveNumber);
}
setInterval(() => {
waveNumber = (waveNumber + 1) % 8;
for (i of document.querySelectorAll(".wave-80")) img80Wave(i.querySelectorAll("img")[1], waveNumber);
}, 40);
}
</script>
----------
게시글의 HTML 모드에서 아래의 코드를 입력하면 자동으로 물결이미지가 만들어 집니다.^^
<div class="wave-80" style="max-width:이미지가로픽셀px"><img src="이미지경로"></div>
이미지는 동일한 패턴으로 몇개를 넣어도 상관 없습니다.
7
댓글 17개
신기합니다.
사실 이건 예전 플래시 액션 스크립트로 만든 효과입니다.
자바스크립트는 플래시와는 달리 타임라인이 없어서 다 셋인터벌 처리해야 해서 그게 좀 성가시지요. 플래시는 온엔터프레임이라는 거저 먹는 이벤트가 있으니까요.
이쁩니다.
@고원에서온망고 감사합니다.
난로 켰네요
@빠왕 진짜 훈훈한 이미지입니다
역시 비타주리님 소스는 멋집니다 ^^
@예뜨락
쓸데없이 코드를 돌리는게 있을 지 싶어서 조금 전에 스크립트에 이프문을 하나 감았습니다.ㅋ
좋아요 추천합니다.
@푸른산타
사용할 일이 있을지나 모르겠네요.ㅋ
공유 감사드립니다. 추천꾹!!!
@marty72
호기심이 다망이라 만들때마다 하나씩 올릴게요.
감사와 감탄과 추천을 함께 드립니다 ^^
공유 감사합니다.
크롬에서는 잘 되는데.
마이크로소프트 엣지에서는 되다가 에러나네요.
저만 그런지..
어 이상하네요. 저는 잘 보이는데.
안 된다면 그냥 포토샵에서 만드세요. 클리핑 마스크 원리만 알면 30분 정도면 psd 를 만들 수 있어요. psd 를 하나 만들어 놓으면 그 다음부터는 단순 거저먹기 대입입니다.
파일은 gif 나 mp4 로 빼면 되구요.
감사합니다.
컴퓨터가 이상한지 다른 컴퓨터에서 해 보겠습니다.
