Bilibili Dynamic Banner

if (!is_home())
  - var banner_style = (typeof(page.bilibili_banner) != "undefined" && page.bilibili_banner!=null) ? page.bilibili_banner : theme.bilibili_banner.style
  if (banner_style === 'autumn')
    #autumnBanner
      div
        img(src='/bilibiliBanner/autumn/bilibili-autumn-1.png')
      div
        img(src='/bilibiliBanner/autumn/bilibili-autumn-2.png')
      div
        img(src='/bilibiliBanner/autumn/bilibili-autumn-3.png')
      div
        img(src='/bilibiliBanner/autumn/bilibili-autumn-4.png')
      div
        img(src='/bilibiliBanner/autumn/bilibili-autumn-5.png')
      div
        img(src='/bilibiliBanner/autumn/bilibili-autumn-6.png')
  else if (banner_style === 'winter')
    #winterBanner
      .view
        img.morning(src='/bilibiliBanner/winter/bilibili-winter-view-1.png' alt='')
        img.afternoon(src='/bilibiliBanner/winter/bilibili-winter-view-2.png' alt='')
        video.evening(autoplay='' loop='' muted='')
          source(src='/bilibiliBanner/winter/bilibili-winter-view-3.webm' type='video/webm')
        img.window-cover(src='/bilibiliBanner/winter/bilibili-winter-view-3-snow.png' alt='')
      .tree
        img.morning(src='/bilibiliBanner/winter/bilibili-winter-tree-1.png' alt='')
        img.afternoon(src='/bilibiliBanner/winter/bilibili-winter-tree-2.png' alt='')
        img.evening(src='/bilibiliBanner/winter/bilibili-winter-tree-3.png' alt='')        
  script(async data-pjax src=url_for(theme.CDN.bilibili_banner))

//autumn_banner

var autumnBanner = document.querySelector('#autumnBanner')
if (autumnBanner) {
  var images = document.querySelectorAll('#autumnBanner > div > img')
  autumnBanner.addEventListener('mousemove', (e) => {
    let percentage = e.clientX / window.outerWidth
    let offset = 10 * percentage
    let blur = 20

    for (let [index, image] of images.entries()) {
      offset *= 1.3

      let blurValue = (Math.pow((index / images.length - percentage), 2) * blur)

      image.style.setProperty('--offset', `${offset}px`)
      image.style.setProperty('--blur', `${blurValue}px`)
    }
  })
}
//winter_banner

var winterBanner = document.querySelector('#winterBanner')
if (winterBanner) {
  var startingPoint
  winterBanner.addEventListener('mouseenter', (e) => {
    startingPoint = e.clientX
    winterBanner.classList.add('moving')
  })

  winterBanner.addEventListener('mouseout', (e) => {
    winterBanner.classList.remove('moving')
    winterBanner.style.setProperty('--percentage', 0.5)
  })

  winterBanner.addEventListener('mousemove', (e) => {
    let percentage = (e.clientX - startingPoint) / window.outerWidth + 0.5

    winterBanner.style.setProperty('--percentage', percentage)
  })
}