作者： Jet L

WordPress官网最近加上了一个飘雪效果，感觉效果相当不错，经过研究后发现他们页面中使用了两个js，而前端只需要用html进行简单调整就可以自定义，可玩性很强。

我们也可以在自己的网站中使用这个效果，首先在Wordpress官网下载到is-land及snow-fall这俩js。

通过模板函数对is-land与snow-fall先后加载：

// js来源自Wordpress官网
function enqueue_island_assets() {
    wp_enqueue_script(
        'island-js',
        get_template_directory_uri() . '/island.js', 
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_island_assets');
wp_enqueue_script(
    'snow-fall-js',
    get_template_directory_uri() . '/snow-fall.js',
    array('island-js'), // 设置依赖
    true
);

前端通过html进行调用，我们通过后面的分析可以发现其为前端预留了多个参数调节，比如我想在页面呈现❄飘落，而不是原版的圆点，只需要调整text的值，写成如下即可：

<is-land on:media="(prefers-reduced-motion: no-preference)" on:idle="">
    <snow-fall mode="page" text="❄"></snow-fall>
</is-land>

2025-1-6更新：如果不需要island里面的一些参数，那么直接引入snow-fall也是可以的：

// island及snowfall的Js文件来自Wordpress官网
function enqueue_snowfall() {
    wp_enqueue_script(
        'snow-fall-js',
        get_template_directory_uri() . '/snow-fall.js', 
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_snowfall');

<snow-fall mode="page" text="❄"></snow-fall>

目前网站采用直接引入Snow-fall的方式展示。

---

后续是源码及一些可以调用的参数信息：

其中is-land的源码如下：

class Island extends HTMLElement {
    static tagName = "is-land";
    static prefix = "is-land--";
    static attr = {
        template: "data-island",
        ready: "ready",
        defer: "defer-hydration"
    };
    static onceCache = new Map;
    static onReady = new Map;
    static fallback = {
        ":not(is-land,:defined,[defer-hydration])": (e, t, a) => {
            let n = document.createElement(a + t.localName);
            for (let e of t.getAttributeNames())
                n.setAttribute(e, t.getAttribute(e));
            let i = t.shadowRoot;
            if (!i) {
                let e = t.querySelector(":scope > template:is([shadowrootmode], [shadowroot])");
                if (e) {
                    let a = e.getAttribute("shadowrootmode") || e.getAttribute("shadowroot") || "closed";
                    i = t.attachShadow({
                        mode: a
                    }),
                    i.appendChild(e.content.cloneNode(!0))
                }
            }
            return i && n.attachShadow({
                mode: i.mode
            }).append(...i.childNodes),
            n.append(...t.childNodes),
            t.replaceWith(n),
            e.then(( () => {
                n.shadowRoot && t.shadowRoot.append(...n.shadowRoot.childNodes),
                t.append(...n.childNodes),
                n.replaceWith(t)
            }
            ))
        }
    };
    constructor() {
        super(),
        this.ready = new Promise((e => {
            this.readyResolve = e
        }
        ))
    }
    static getParents(e, t=!1) {
        let a = [];
        for (; e; ) {
            if (e.matches && e.matches(Island.tagName)) {
                if (t && e === t)
                    break;
                Conditions.hasConditions(e) && a.push(e)
            }
            e = e.parentNode
        }
        return a
    }
    static async ready(e, t) {
        if (t || (t = Island.getParents(e)),
        0 === t.length)
            return;
        let a = await Promise.all(t.map((e => e.wait())));
        return a.length ? a[0] : void 0
    }
    forceFallback() {
        window.Island && Object.assign(Island.fallback, window.Island.fallback);
        for (let e in Island.fallback) {
            let t = Array.from(this.querySelectorAll(e)).reverse();
            for (let a of t) {
                if (!a.isConnected)
                    continue;
                let t = Island.getParents(a);
                if (1 === t.length) {
                    let n = Island.ready(a, t);
                    Island.fallback[e](n, a, Island.prefix)
                }
            }
        }
    }
    wait() {
        return this.ready
    }
    async connectedCallback() {
        Conditions.hasConditions(this) && this.forceFallback(),
        await this.hydrate()
    }
    getTemplates() {
        return this.querySelectorAll(`template[${Island.attr.template}]`)
    }
    replaceTemplates(e) {
        for (let t of e) {
            if (Island.getParents(t, this).length > 0)
                continue;
            let e = t.getAttribute(Island.attr.template);
            if ("replace" === e) {
                let e = Array.from(this.childNodes);
                for (let t of e)
                    this.removeChild(t);
                this.appendChild(t.content);
                break
            }
            {
                let a = t.innerHTML;
                if ("once" === e && a) {
                    if (Island.onceCache.has(a))
                        return void t.remove();
                    Island.onceCache.set(a, !0)
                }
                t.replaceWith(t.content)
            }
        }
    }
    async hydrate() {
        let e = [];
        this.parentNode && e.push(Island.ready(this.parentNode));
        let t = Conditions.getConditions(this);
        for (let a in t)
            Conditions.map[a] && e.push(Conditions.map[a](t[a], this));
        await Promise.all(e),
        this.replaceTemplates(this.getTemplates());
        for (let e of Island.onReady.values())
            await e.call(this, Island);
        this.readyResolve(),
        this.setAttribute(Island.attr.ready, ""),
        this.querySelectorAll(`[${Island.attr.defer}]`).forEach((e => e.removeAttribute(Island.attr.defer)))
    }
}
class Conditions {
    static map = {
        visible: Conditions.visible,
        idle: Conditions.idle,
        interaction: Conditions.interaction,
        media: Conditions.media,
        "save-data": Conditions.saveData
    };
    static hasConditions(e) {
        return Object.keys(Conditions.getConditions(e)).length > 0
    }
    static getConditions(e) {
        let t = {};
        for (let a of Object.keys(Conditions.map))
            e.hasAttribute(`on:${a}`) && (t[a] = e.getAttribute(`on:${a}`));
        return t
    }
    static visible(e, t) {
        if ("IntersectionObserver"in window)
            return new Promise((e => {
                let a = new IntersectionObserver((t => {
                    let[n] = t;
                    n.isIntersecting && (a.unobserve(n.target),
                    e())
                }
                ));
                a.observe(t)
            }
            ))
    }
    static idle() {
        let e = new Promise((e => {
            "complete" !== document.readyState ? window.addEventListener("load", ( () => e()), {
                once: !0
            }) : e()
        }
        ));
        return "requestIdleCallback"in window ? Promise.all([new Promise((e => {
            requestIdleCallback(( () => {
                e()
            }
            ))
        }
        )), e]) : e
    }
    static interaction(e, t) {
        let a = ["click", "touchstart"];
        return e && (a = (e || "").split(",").map((e => e.trim()))),
        new Promise((e => {
            function n(i) {
                e();
                for (let e of a)
                    t.removeEventListener(e, n)
            }
            for (let e of a)
                t.addEventListener(e, n, {
                    once: !0
                })
        }
        ))
    }
    static media(e) {
        let t = {
            matches: !0
        };
        if (e && "matchMedia"in window && (t = window.matchMedia(e)),
        !t.matches)
            return new Promise((e => {
                t.addListener((t => {
                    t.matches && e()
                }
                ))
            }
            ))
    }
    static saveData(e) {
        if ("connection"in navigator && navigator.connection.saveData !== ("false" !== e))
            return new Promise(( () => {}
            ))
    }
}
"customElements"in window && (window.customElements.define(Island.tagName, Island),
window.Island = Island);
export {Island, Island as component};
export const ready = Island.ready;

通过前端代码调用：

<is-land on:media="(prefers-reduced-motion: no-preference)" on:idle="" ready="">
<snow-fall mode="page"></snow-fall>
</is-land>

其中可以定义：

on:media：当满足媒体查询条件时加载内容。

on:idle：在浏览器空闲时间或页面完全加载后执行。

on:visible：当标签内容滚动到视口中时加载。

on:interaction：在用户交互（如点击、触摸）后加载。

on:save-data：根据设备的省流量模式决定是否加载内容。

对于snow-fall.js，源码如下：

class Snow extends HTMLElement {
    static random(t, e) {
        return t + Math.floor(Math.random() * (e - t) + 1)
    }
    static attrs = {
        count: "count",
        mode: "mode",
        text: "text"
    };
    generateCss(t, e) {
        let n = [];
        n.push('\n:host([mode="element"]) {\n\tdisplay: block;\n\tposition: relative;\n\toverflow: hidden;\n}\n:host([mode="page"]) {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n}\n:host([mode="page"]),\n:host([mode="element"]) > * {\n\tpointer-events: none;\n}\n:host([mode="element"]) ::slotted(*) {\n\tpointer-events: all;\n}\n* {\n\tposition: absolute;\n}\n:host([text]) * {\n\tfont-size: var(--snow-fall-size, 1em);\n}\n:host(:not([text])) * {\n\twidth: var(--snow-fall-size, 10px);\n\theight: var(--snow-fall-size, 10px);\n\tbackground: var(--snow-fall-color, rgba(255,255,255,.5));\n\tborder-radius: 50%;\n}\n');
        let o = {
            width: 100,
            height: 100
        }
          , a = {
            x: "vw",
            y: "vh"
        };
        "element" === t && (o = {
            width: this.firstElementChild.clientWidth,
            height: this.firstElementChild.clientHeight
        },
        a = {
            x: "px",
            y: "px"
        });
        for (let t = 1; t <= e; t++) {
            let e = Snow.random(1, 100) * o.width / 100
              , s = Snow.random(-10, 10) * o.width / 100
              , i = Math.round(Snow.random(30, 100))
              , l = i * o.height / 100
              , r = o.height
              , h = 1e-4 * Snow.random(1, 1e4)
              , d = Snow.random(10, 30)
              , m = -1 * Snow.random(0, 30);
            n.push(`\n:nth-child(${t}) {\n\topacity: ${.001 * Snow.random(0, 1e3)};\n\ttransform: translate(${e}${a.x}, -10px) scale(${h});\n\tanimation: fall-${t} ${d}s ${m}s linear infinite;\n}\n\n@keyframes fall-${t} {\n\t${i}% {\n\t\ttransform: translate(${e + s}${a.x}, ${l}${a.y}) scale(${h});\n\t}\n\n\tto {\n\t\ttransform: translate(${e + s / 2}${a.x}, ${r}${a.y}) scale(${h});\n\t}\n}`)
        }
        return n.join("\n")
    }
    connectedCallback() {
        if (this.shadowRoot || !("replaceSync"in CSSStyleSheet.prototype))
            return;
        let t, e = parseInt(this.getAttribute(Snow.attrs.count)) || 100;
        this.hasAttribute(Snow.attrs.mode) ? t = this.getAttribute(Snow.attrs.mode) : (t = this.firstElementChild ? "element" : "page",
        this.setAttribute(Snow.attrs.mode, t));
        let n = new CSSStyleSheet;
        n.replaceSync(this.generateCss(t, e));
        let o = this.attachShadow({
            mode: "open"
        });
        o.adoptedStyleSheets = [n];
        let a = document.createElement("div")
          , s = this.getAttribute(Snow.attrs.text);
        a.innerText = s || "";
        for (let t = 0, n = e; t < n; t++)
            o.appendChild(a.cloneNode(!0));
        o.appendChild(document.createElement("slot"))
    }
}
customElements.define("snow-fall", Snow);

其定义了一个自定义 HTML 元素 <snow-fall>，用于实现落雪效果。

我们可以通过改变js中的一些数值来变更效果，例如

static attrs = { count: “count”, mode: “mode”, text: “text” };

count：雪花的数量，默认值是 100。

mode：两种模式：

1、element：作用于某个特定元素。

2、page：覆盖整个页面。

text：雪花的文本内容（默认为空，显示为圆形点）。

page模式目前已经满足使用，如果想使用element模式目前似乎会出现firstElementChild 为空或未能正确获取其 clientWidth，导致 generateCss 方法出错。如何正确使用element模式还需要探究。

通过 generateCss(t, e) { 动态生成CSS，可以定义：

1、:host([mode=”element”]) 和 :host([mode=”page”]) 用于适配不同模式。

2、雪花的大小由 –snow-fall-size 决定，颜色由 –snow-fall-color 决定。

动态生成每个雪花的动画样式：

1、起始位置：translate(${e}${a.x}, -10px)

2、随机透明度：opacity

3、动画时长：animation: fall-${t} ${d}s ${m}s linear infinite;

4、动画帧 @keyframes： 中间位置：随机 x 偏移，随机 y 偏移。最终位置：完全落到底部。