WorldPress 添加动态标题

  我们希望可以动态地改变站点在浏览器上的标题：

1. 当我们切换到其他页面时，标题显示为你别走吖 Σ(っ °Д °;)っ；
2. 当我切换回页面时，标题显示为(/≧▽≦/)你又回来啦！，持续两秒。

  我们首先下载插件Insert Headers and Footers，之后在其设置页面的Scripts in Header中添加如下内容：

<script>
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
    function() 
    {
        if (document.hidden) 
        {
            document.title = "你别走吖 Σ(っ °Д °;)っ";
            clearTimeout(titleTime)
        } 
        else 
        {
            document.title = "(/≧▽≦/)你又回来啦！" ;
            titleTime = setTimeout(function() { document.title = OriginTitile }, 2000)
        }
    }
);
</script>

  另外附上我自用的一个插件，主要是保留了原标题，提高在其他页面的可读性。

<script>
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
    function() 
    {
        if (document.hidden) 
        {
            document.title = "Σ(;ﾟдﾟ) | " + OriginTitile;
            clearTimeout(titleTime)
        } 
        else 
        {
            document.title = "ε٩(๑> ₃ <)۶з | お帰り" ;
            titleTime = setTimeout(function() { document.title = OriginTitile }, 2000)
        }
    }
);
</script>

  下面的则是footer的变换，我的footer信息如下：

<span id="copyright">Copyright <span id="copy">©</span> by Morning All Rights Reserved.</span>
<br>
<a href="https://beian.miit.gov.cn/" id="icp">蜀ICP备19007694号-1</a>

我希望实现id="copy"的透明渐变，以及id="icp"的波浪效果：

<style>
.wave-text {
  display: inline-block;
  animation: wave 1s infinite;
}

@keyframes wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.fade {
  display: inline-block;
  animation: fade 2s linear infinite;
}

@keyframes fade {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var copy = document.getElementById('copy');
  var icp = document.getElementById('icp');

  function wrapCharacters(element, className) {
    var text = element.innerText;
    var wrappedText = '';

    for (var i = 0; i < text.length; i++) {
      wrappedText += '<span class="' + className + '">' + text[i] + '</span>';
    }

    element.innerHTML = wrappedText;
  }

  function applyWaveAnimation(element) {
    var characters = element.getElementsByClassName('wave-text');
    var delay = 0;

    for (var i = 0; i < characters.length; i++) {
      characters[i].style.animationDelay = delay + 's';
      delay += 0.1;
    }
  }

  copy.classList.add('fade');

  wrapCharacters(icp, 'wave-text');
  applyWaveAnimation(icp);
});
</script>