김광석 - 그루터기 : NPIO 님 > 팁

<style>
#lrcDiv { max-width:1024px; padding:30px 30px 25px 30px; background:linear-gradient(#fff8f6 15%, #f5a9a9 50%, #fdf3f4 70%); border-radius:10px; border:1px solid #cccccc; box-shadow:2px 2px 6px 1px #dddddd; margin:0 auto; box-sizing:border-box; }
#lrcDiv div { position:relative; overflow:hidden; }
#gif { display:block; width:100%; border:1px solid #dddddd; border-radius:10px; box-sizing:border-box; }
#lrcDiv div div { position:absolute; width:100%; top:14%; left:9%; }
.lrc-img { display:block; width:30%; cursor:pointer; }
#sound { display:block; background-color:#df0101;  }
#sound div { padding-top:15px; background-color:#f1f3f4; mix-blend-mode:screen; }
#audioPlayer { width:100%; display:block; height:32px; margin:0 auto; }
@media (orientation: portrait) { #lrcDiv { padding:15px 15px 10px 15px; } #sound div { padding-top:5px; } zzurri audio { width:100%; } }
</style>
<div id="lrcDiv"><div>
<img id="gif" src="//blog.kakaocdn.net/dn/MzPOE/btrWv8olMKk/ZQ2OCIgjTWKKBbW2Mjkp1k/img.gif">
<div>
<img class="lrc-img"
data-default="//blog.kakaocdn.net/dn/bfXFfd/btrWyMRuH9N/5nxzyGEIvgJ2JYdqfGe9E1/img.png" data-impact="//blog.kakaocdn.net/dn/bRn8Ca/btrWxrAl3hb/yr4tiDS6LuNeSDhUvz4Kd1/img.png" data-sec=0>
<img class="lrc-img"
data-default="//blog.kakaocdn.net/dn/dE7Mpp/btrWqqJB5dX/xK6ca9uK1uk0QkNWTQ2nx0/img.png" data-impact="//blog.kakaocdn.net/dn/uTkkJ/btrWu7iQ6Cf/m5jmrRxCWgIQG10KgnKRHK/img.png" data-sec=15>
<img class="lrc-img" data-default="//blog.kakaocdn.net/dn/xXNWZ/btrWq9m46dP/rezG8DnDtZhK6bvPkARGcK/img.png" data-impact="//blog.kakaocdn.net/dn/WNPTz/btrWx7uQVYB/7S1K1Jpq7Bxtli7tqGSKPk/img.png" data-sec=30>
<img class="lrc-img" data-default="//blog.kakaocdn.net/dn/c731YY/btrWtd3kcpW/oHb3SKEVsGejILj1uevVw1/img.png" data-impact="//blog.kakaocdn.net/dn/XjxmJ/btrWwgNoue3/5jXG5SUm6W6ZTgYi310Wt0/img.png" data-sec=44>
<img class="lrc-img" data-default="//blog.kakaocdn.net/dn/cZNGYm/btrWwgFel1g/diMaK7IaEoKAkf6KwhpQW0/img.png" data-impact="//blog.kakaocdn.net/dn/w4COl/btrWyKzqYJX/AXzlWY6N3wK9uhAzeTTck1/img.png" data-sec=58.5>
<img class="lrc-img" data-default="//blog.kakaocdn.net/dn/nETjL/btrWqB5q1ma/1xuppg99Igtf88YPwJ2lk0/img.png" data-impact="//blog.kakaocdn.net/dn/GFod8/btrWwJ9mhRu/WBZGvCHTOOFNACoPcIWjoK/img.png" data-sec=73>
<img class="lrc-img" data-default="//blog.kakaocdn.net/dn/q35re/btrWq89xXp0/vPH0ZJKIgTIFpxNWEQ9Ks1/img.png" data-impact="//blog.kakaocdn.net/dn/dhAHZs/btrWxrUHpg2/OAJbKkkJxSqI3ch2hZxZhk/img.png" data-sec=87>
<img class="lrc-img" data-default="//blog.kakaocdn.net/dn/YA7s4/btrWskPa6y3/09JwgkcnNVmPk8PRDk5qUk/img.png" data-impact="//blog.kakaocdn.net/dn/bSH0BR/btrWwfHJiMH/wmg1pYzzn6JP6yX4mu3V41/img.png" data-sec=101>
<img class="lrc-img" data-default="//blog.kakaocdn.net/dn/bDCAka/btrWqCi0zzE/Cey437gsvLNlTOgiRjxE0k/img.png" data-impact="//blog.kakaocdn.net/dn/cbDmL1/btrWx5KACXj/XgyIXAPXk28i6wQkeCXCQK/img.png" data-sec=115.5>
</div></div>
<span id="sound"><div><audio id="audioPlayer" src="//blog.kakaocdn.net/dn/u7KXt/btrWrJhnb4D/0khwGzKuRWLkvmIw0L1K10/tfile.mp3" autoplay loop controls controlslist="nodownload"></audio></div></span>
</div>
<script>
lrc = lrcDiv.getElementsByClassName("lrc-img");
setInterval(lrcMode = function() {
    for (i = 0; i < lrc.length; i++) lrc[i].src = lrc[i].dataset[lrc[i].dataset.sec <= audioPlayer.currentTime ? "impact" : "default"];
}, 500);
for (i = 0; i < lrc.length; i++) {
    lrc[i].src = lrc[i].dataset[i === 0 ? "impact" : "default"];
    lrc[i].addEventListener("click", function() {
        audioPlayer.currentTime = this.dataset.sec;
        lrcMode();
    } );
}
</script>
<script>
document.addEventListener("DOMContentLoaded", () => {
    container.style.width = "100%";
    aside.style.display = "none";
} );
</script>