[Feature Request] 请问博主的博客下拉自动模糊背景的功能是怎么做的？

[pidanxia]

功能描述

请问一下博主博客里的下拉背景自动模糊的背景是怎么做的呀？我找了好多资料都做不出来~求助求助

附加说明

No response

[LaiZho]

在主题设置脚本里加入前台 Head 代码

<script>
        window.addEventListener("scroll", function() {
            var content = document.querySelector("#content").classList;
            window.scrollY > window.innerHeight * 0.3 ? content.add("scrolled"):content.remove("scrolled");
        });
    </script> 
  <style>
        #content.scrolled::before {
            filter: blur(5px);
            transform: scale(1.00);
        }
    </style>

就可以了

[pidanxia]

非常感谢！！！按照您说的方法已经改好了！非常感谢您！

[crowya]

我把作者的代码copy出来了，这个似乎效果更好

<!--滚动模糊--><script>
window.addEventListener("scroll", function (e) {
  if (window.scrollY > window.innerHeight * 0.3) {
    document.querySelector("#content").classList.add("scrolled");
  } else {
    document.querySelector("#content").classList.remove("scrolled");
  }
});</script>
<style>
#content.scrolled::before {
  filter: blur(6px);
  transform: scale(1.02);
}
#content::before {
  transition: filter .3s ease, transform .3s ease !important;
  filter: blur(0px);
  transform: scale(1.02);
}</style>