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 에 입력합니다.

[code]

<script>
function waveLineHeight() {
    if (typeof document.querySelectorAll(".wave-line-height")[0] == "object") {
        document.write(`
            <style>
            .wave-line-height { position:relative; overflow:hidden; margin:0 auto; }
            .wave-line-height img { display:block; width:100%; }
            .wave-line-height img:nth-of-type(2) { position:absolute; top:-1px; -webkit-mask-size:100% 80px; mask-size:100% 80px; }
            </style>
        `);
        waveLineHeightMode = [[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 waveLineHeightFunctipon(...wave_line_height) {
            wave_line_height[0].style.WebkitMaskImage = wave_line_height[0].style.maskImage = "linear-gradient(0deg, transparent " + waveLineHeightMode[wave_line_height[1]][0] + "px, #000000 " + waveLineHeightMode[wave_line_height[1]][0] + "px " + waveLineHeightMode[wave_line_height[1]][1] + "px, transparent " + waveLineHeightMode[wave_line_height[1]][1] + "px " + waveLineHeightMode[wave_line_height[1]][2] + "px, #000000 " + waveLineHeightMode[wave_line_height[1]][2] + "px)";
        }
        waveLineHeightNumber = 0;
        for (wlh of document.querySelectorAll(".wave-line-height")) {
            wlh.insertAdjacentHTML("beforeend", "<img src='" + wlh.querySelectorAll("img")[0].src + "'>");
            waveLineHeightFunctipon(wlh.querySelectorAll("img")[1], waveLineHeightNumber);
        }
        setInterval(() => {
            waveLineHeightNumber = (waveLineHeightNumber + 1) % 8;
            for (wlh of document.querySelectorAll(".wave-line-height")) waveLineHeightFunctipon(wlh.querySelectorAll("img")[1], waveLineHeightNumber);
        }, 40);
    }
}
waveLineHeight();
</script>

[/code]

----------

게시글의 HTML 모드에서 아래의 코드를 입력하면 자동으로 물결이미지가 만들어 집니다.^^

<div class="wave-line-height" style="max-width:이미지가로픽셀px"><img src="이미지경로"></div>

이미지는 동일한 패턴으로 몇개를 넣어도 상관 없습니다.