jerryc127 / hexo-theme-butterfly

🦋 A Hexo Theme: Butterfly
https://butterfly.js.org
Apache License 2.0
6.82k stars 1.24k forks source link

[Feature]: 增加页面平滑滚动 #1427

Closed YL2209 closed 5 months ago

YL2209 commented 5 months ago

想要的功能 | What feature do you want?

增加页面平滑滚动

smoothscroll-for-websites

YL2209 commented 5 months ago

原文链接

smoothscroll.pug

- const { frameRate, animationTime, stepSize, accelerationDelta, accelerationMax, keyboardSupport, arrowScroll, pulseAlgorithm, pulseScale, pulseNormalize, fixedBackground } = theme.smoothscroll

script.
  window.SmoothScrollOptions = { 
    frameRate: !{frameRate ? frameRate : 150 },
    animationTime: !{animationTime ? animationTime : 400 },
    stepSize: !{stepSize ? stepSize : 100 },
    accelerationDelta: !{accelerationDelta ? accelerationDelta : 50 },
    accelerationMax: !{accelerationMax ? accelerationMax : 3 },
    keyboardSupport: !{keyboardSupport},
    arrowScroll: !{arrowScroll ? arrowScroll : 50 },
    pulseAlgorithm: !{pulseAlgorithm},
    pulseScale: !{pulseScale ? pulseScale : 4 },
    pulseNormalize: !{pulseNormalize ? pulseNormalize : 1 },
    fixedBackground: !{fixedBackground}
  }

script(async src=url_for(theme.smoothscroll.smoothscroll_js))

_config.butterfly.yml

# 页面平滑滚动
smoothscroll:
  enable: true #控制开关
  smoothscroll_js: https://npm.onmicrosoft.cn/naokuo-blog@1.2.10/js/SmoothScroll.min.js
  frameRate: 150 # [Hz]
  animationTime: 400 # [ms]
  stepSize: 100 # [px]
  accelerationDelta: 50  # 50
  accelerationMax: 3   # 3
  keyboardSupport: true  # option
  arrowScroll: 50    # [px]
  pulseAlgorithm: true # true
  pulseScale: 4 # 4
  pulseNormalize: 1 # 1
  fixedBackground: true # 背景固定
jerryc127 commented 5 months ago

現在很多瀏覽器都自帶 smoothscroll 了 而且也有 css 也可以實現 image