落雪 bg

讓網頁飄雪的背景效果，還會積雪喔。( ´ ▽ ` )ﾉ

使用範例

基本用法

使用 v-bg-static 指令可以讓指定物體積雪。

下雪了！੭ ˙ᗜ˙ )੭

查看範例原始碼

<template>
  <div class="w-full flex items-center justify-center">
    <div class="flex gap-10">
      <base-checkbox
        v-model="enable"
        v-bg-static
        label="下雪了！੭ ˙ᗜ˙ )੭"
        class="border border-gray-300 rounded p-4"
      />

      <base-btn
        v-bg-static
        label="除雪"
        class="border-gray-300"
        @click="sweep()"
      />
    </div>

    <bg-snow
      ref="bgRef"
      class="fixed left-0 top-0 z-[100] h-full w-full"
      :class="{ 'opacity-0': !enable }"
    />
  </div>
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { onUnmounted, ref, watch } from 'vue'
import BaseBtn from '../../base-btn.vue'
import BaseCheckbox from '../../base-checkbox.vue'
import BgSnow from '../bg-snow.vue'
import { vBgStatic } from '../v-bg-static'

const enable = ref(false)

const bgRef = ref<InstanceType<typeof BgSnow>>()
function sweep() {
  bgRef.value?.sweep()
}

const { isDark } = useData()

const oriValue = isDark.value

watch(enable, (value) => {
  isDark.value = value
})

onUnmounted(() => {
  isDark.value = oriValue
})
</script>

原理

下雪動畫基於 babylon.js 的粒子系統，積雪效果則是對被 v-bg-static 標記的 DOM 進行碰撞偵測

這裡就會有個小問題，因為雪的數量非常多，其計算量可能會相當可觀，如果直接在主執行續進行計算，就會導致畫面卡卡、不流暢。

這裡使用了一個有趣的小技巧，那就是 Offscreen Canvas！( •̀ ω •́ )✧

這個技術可以讓整個 Canvas 繪製都交給 Web Worker 處理，也就是說包含費時的計算任務在內，所有的計算都不會再主執行續進行，就不用擔心畫面卡頓了。(/≧▽≦)/

所以我說那個支援度呢？ლ（´口`ლ）

截至 2024/12/22，瀏覽器支援度為 95.21%，應該是可以放心用啦 ᕕ( ﾟ ∀。)ᕗ

大家查看原始碼時，可能會發現我用了一個名為 Comlink 的套件，這個套件可以大幅簡化 Web Worker 與主執行續之間傳遞訊息的方式。( ´ ▽ ` )ﾉ

不然原本要用 postMessage 傳遞訊息，寫起來真滴麻煩。⎝(・ω´・⎝)

原始碼

元件

、範例

API

Methods

defineExpose({
  /** 清除積雪 */
  sweep,
})