Argon主题添加下拉背景模糊的效果

本站采用了一个轻盈、简洁的WordPress主题Argon,但是在配置过程中没有找到作者的主站下拉背景模糊效果的配置项。猜测应该是作者的自定义,主题中也有脚本可以配置自定义代码,那就自己实现一下吧。
为了效率直接问问Claude,参考作者的站点元素,迭代了几次便实现了此效果,以下便是配置步骤。

css配置

找到Argon主题选项脚本配置项,在页头脚本中加入以下css代码。

<style>
    #content::before {
        transition: filter .3s ease, transform .3s ease !important;
        filter: blur(0px);
        transform: scale(1.02);
    }
    #content.scrolled::before {
        filter: blur(6px);
        transform: scale(1.02);
    }
</style>

js配置

页尾脚本中加入以下js代码。

<script>
    const banner = document.querySelector('#banner');
    const content = document.querySelector('#content');
      
    window.addEventListener('scroll', () => {
        if(window.scrollY > banner.offsetHeight / 2) {
            content.classList.add('scrolled');
        } else {
            content.classList.remove('scrolled');
        }
    });
</script>

通过修改if(window.scrollY > banner.offsetHeight / 2)中的系数可以修改下滑时触发的距离大小,最后保存更改后刷新即可预览效果,enjoy it!



  • 本文作者: Mashiro_Sorata

  • 版权声明: 本站所有文章除特别声明外,均采用 (CC)BY-NC-SA 许可协议。转载请注明出处!


评论

  1. Windows Edge
    已编辑
    4月前
    2023-8-07 21:02:17

    截图
    看看这张图

    • 博主
      梧桐漓染
      Android Chrome
      4月前
      2023-8-07 21:29:02

      应该是markdown解析script标签出了问题,是bug。

  2. Windows Edge
    4月前
    2023-8-07 19:29:34

    测试

    • 梧桐漓染
      Windows Edge
      4月前
      2023-8-07 19:33:20

      博主,你这里的评论功能貌似有点问题

      • 梧桐漓染
        Windows Edge
        4月前
        2023-8-07 19:34:15

        可能是开启评论过滤了

        • 博主
          梧桐漓染
          Android Chrome
          4月前
          2023-8-07 20:54:18

          我在后台没看到被吞的回复啊

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇