diff --git a/waifu-tips.js b/waifu-tips.js index b27a4d4..56c9a40 100755 --- a/waifu-tips.js +++ b/waifu-tips.js @@ -1,6 +1,6 @@ /* - * https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02 - * https://www.fghrsh.net/post/123.html + * Live2D Widget + * https://github.com/stevenjoezhang/live2d-widget */ function loadWidget(waifuPath, apiPath) { @@ -136,10 +136,12 @@ function loadWidget(waifuPath, apiPath) { } if (Array.isArray(text)) text = text[Math.floor(Math.random() * text.length)]; sessionStorage.setItem("waifu-text", priority); - $("#waifu-tips").stop().html(text).fadeTo(200, 1); + var tips = document.getElementById("waifu-tips"); + tips.innerHTML = text; + tips.classList.add("waifu-tips-active"); messageTimer = setTimeout(() => { sessionStorage.removeItem("waifu-text"); - $("#waifu-tips").fadeTo(1000, 0); + tips.classList.remove("waifu-tips-active"); }, timeout); } } diff --git a/waifu.css b/waifu.css index 5724a7a..5b8d872 100755 --- a/waifu.css +++ b/waifu.css @@ -57,10 +57,16 @@ padding: 5px 10px; position: absolute; text-overflow: ellipsis; + transition: opacity 1s; width: 250px; word-break: break-all; } +#waifu-tips.waifu-tips-active { + opacity: 1; + transition: opacity .2s; +} + #waifu-tips span { color: #0099cc; }