本文为 Sakura 页面特效的总结，均已本地原版主题测试过，很多都是通用的教程~

樱花飘落特效

摘录Blog点击樱花效果与不同数量漂浮樱花

缘由

因为普遍在使用的樱花背景效果花瓣数太多了，一些人不太喜欢。
于是按不同花瓣数量做了几个新的 js ，并提供如下 cdn 形式的引用：

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/fz6m/[email protected]/js/custom/click.min.js"></script>

以上为少量樱花效果，另提供几个不同数量的文件引用名：

文件名说明
sakura-small.js少量樱花
sakura-half.js樱花相对原效果数量减半
sakura-reduce.js樱花相对原效果减少1/4
sakura-original.js樱花数量不变（原效果）

对于想安静阅读并且保持樱花效果的，这里推荐的是第一种少量 sakura-small.js 或第二种减半 sakura-half.js

预览

鼠标点击特效1

参考鼠标点击特效和鼠标跟随特效

将下面的代码保存为 click.js，在主题 footer.php 文件中 </body> 标签前引用即可

onload = function() {
    var click_cnt = 0;
    var $html = document.getElementsByTagName("html")[0];
    var $body = document.getElementsByTagName("body")[0];
    $html.onclick = function(e) {
        var $elem = document.createElement("b");
        $elem.style.color = "#E94F06";
        $elem.style.zIndex = 9999;
        $elem.style.position = "absolute";
        $elem.style.select = "none";
        var x = e.pageX;
        var y = e.pageY;
        $elem.style.left = (x - 10) + "px";
        $elem.style.top = (y - 20) + "px";
        clearInterval(anim);
        switch (++click_cnt) {
            case 10:
                $elem.innerText = "OωO";
                break;
            case 20:
                $elem.innerText = "(๑•́ ∀ •̀๑)";
                break;
            case 30:
                $elem.innerText = "(๑•́ ₃ •̀๑)";
                break;
            case 40:
                $elem.innerText = "(๑•̀_•́๑)";
                break;
            case 50:
                $elem.innerText = "（￣へ￣）";
                break;
            case 60:
                $elem.innerText = "(╯°口°)╯(┴—┴";
                break;
            case 70:
                $elem.innerText = "૮( ᵒ̌皿ᵒ̌ )ა";
                break;
            case 80:
                $elem.innerText = "╮(｡>口<｡)╭";
                break;
            case 90:
                $elem.innerText = "( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃";
                break;
            case 100:
            case 101:
            case 102:
            case 103:
            case 104:
            case 105:
                $elem.innerText = "(ꐦ°᷄д°᷅)";
                break;
            default:
                $elem.innerText = "❤";
                break;
        }
        $elem.style.fontSize = Math.random() * 10 + 8 + "px";
        var increase = 0;
        var anim;
        setTimeout(function() {
            anim = setInterval(function() {
                if (++increase == 150) {
                    clearInterval(anim);
                    $body.removeChild($elem);
                }
                $elem.style.top = y - 20 - increase + "px";
                $elem.style.opacity = (150 - increase) / 120;
            }, 8);
        }, 70);
        $body.appendChild($elem);
    };
};


<script type="text/javascript" src="/click.js"></script>

注意，此 js 挂载到了 onload 上，如果你还有其他的效果也挂载在 onload ，请自行下载该文件，合并两个函数的代码到一起。（比如浏览器标签页动态标题效果，一般也挂载到 onload 上）

鼠标点击特效2

见此：鼠标点击特效，canvas点击效果

背景三角体特效

插件实现

在WordPress里搜索一款名叫 canvas-nest 的插件，安装启用就可以了

代码实现

官方中文文档：canvas-nest.js

直接引入 JS 即可

<script color="0,0,255" opacity='1' zIndex="-1" count="100" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/canvas-nest.js" type="text/javascript"></script>
参数说明
color线条颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用 , 分割
pointColor交点颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用 , 分割
opacity线条透明度（0~1）, 默认: 0.5
count线条的总数量, 默认: 150
zIndex背景的 z-index 属性，css 属性用于控制所在层的位置, 默认: -1

文字打字特效

参考文章：酷炫的打字机效果: Typed.js

  1. 使用特效需要引用 Typed.js 文件
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/typed.min.js"></script>
  1. 将如下代码添加到主题目录中的 js/sakura-app.js 文件底部或者 footer.php
var typed = new Typed('.element', {
    strings: ["纠正一个错误的方法有很多", "而解决一个错误的终极方法，就是不给它发生的机会。"], //输入内容, 支持html标签
    typeSpeed: 100, //打字速度
    backSpeed: 50, //回退速度
    loop: true, //是否循环
    loopCount: Infinity,
    showCursor: false //是否开启光标
});
  1. 然后用如下代码在你想要的地方引用即可
<span class="element"></span>

浏览器标签页动态标题

所谓动态标题是指当页面切换到其他窗口，即当前页面被隐藏时，浏览器的标签页的标题会发生变化。下面代码放到 footer.php 文件中 </body> 标签前即可

  1. 代码如下
window.onload = function() {
    let hour = new Date().getHours()
    let str = ''
    if (hour < 6) {
        str = '修仙中……'
    } else if (hour < 9) {
        str = '早上好！'
    } else if (hour < 12) {
        str = '上午好！'
    } else if (hour < 14) {
        str = '中午好！'
    } else if (hour < 17) {
        str = '下午好！'
    } else if (hour < 19) {
        str = '傍晚好！'
    } else if (hour < 22) {
        str = '晚上好！'
    } else {
        str = '夜深了，要早点休息哦！'
    }

    function c() {
        document.title = document[a] ? '㋡ Hi,小伙伴,' + str + '好! [' + d + ']' : d
    }

    let a = document.title
    let b = document.title
    let d = document.title
    typeof document.hidden !== 'undefined' ? (a = 'hidden', b = 'visibilitychange') :
        typeof document.mozHidden !== 'undefined' ? (a = 'mozHidden', b = 'mozvisibilitychange') :
        typeof document.webkitHidden !== 'undefined' && (a = 'webkitHidden', b = 'webkitvisibilitychange')
    typeof document.addEventListener === 'undefined' && typeof document[a] === 'undefined' || document.addEventListener(b,
        c, !1)
}

上文说过这种挂载到全局 onload 上的函数，只能有一个，所以如果需要多个（比如动态标题和鼠标点击效果），请自行下载对应的两个效果文件，把函数写在 window.onload 挂载的一个函数内。

  1. 另一种切换会提示崩溃的如下
var OriginTitile = document.title;
var jiao;
document.addEventListener('visibilitychange', function() {
    if (location.href != "https://你的域名/")(document.hidden) {
        document.title = "(つェ⊂)誒呀，網站崩潰了";
        clearTimeout(jiao);
    } else {
        document.title = '(*´∇｀*) 咦,又好了~ ' + OriginTitile;
        jiao = setTimeout(function() {
            document.title = OriginTitile;
        }, 4000);
    }
});

标题鼠标触动音乐特效

参考利用HTML5 Web Audio API给网页JS交互增加声音

  1. 修改主题目录下的 js/sakura-app.js 文件，大概第10行的位置如下
mashiro_global.ini = new function() {
    this.normalize = function() { // initial functions when page first load (首次加载页面时的初始化函数)
        lazyload();
        social_share();
        post_list_show_animation();
        copy_code_block();
        //标题触动音乐初加载
        web_audio();
        coverVideoIni();
        checkskinSecter();
        scrollBar();
    }
    this.pjax = function() { // pjax reload functions (pjax 重载函数)
        pjaxInit();
        social_share();
        post_list_show_animation();
        copy_code_block();
        //标题触动音乐重载
        web_audio();
        coverVideoIni();
        checkskinSecter();
    }
}
  1. 在此文件最底部添加以下代码，保存完事
/* 标题触动音乐 */
var cached_body = $("body");
function web_audio() {
    window.AudioContext = window.AudioContext || window.webkitAudioContext,
        function() {
            if (window.AudioContext) {
                var e = new AudioContext,
                    t =
                    "880 987 1046 987 1046 1318 987 659 659 880 784 880 1046 784 659 659 698 659 698 1046 659 1046 1046 1046 987 698 698 987 987 880 987 1046 987 1046 1318 987 659 659 880 784 880 1046 784 659 698 1046 987 1046 1174 1174 1174 1046 1046 880 987 784 880 1046 1174 1318 1174 1318 1567 1046 987 1046 1318 1318 1174 784 784 880 1046 987 1174 1046 784 784 1396 1318 1174 659 1318 1046 1318 1760 1567 1567 1318 1174 1046 1046 1174 1046 1174 1567 1318 1318 1760 1567 1318 1174 1046 1046 1174 1046 1174 987 880 880 987 880"
                    .split(" "), //天空之城
                    /*t = "329.628 329.628 349.228 391.995 391.995 349.228 329.628 293.665 261.626 261.626 293.665 329.628 329.628 293.665 293.665 329.628 329.628 349.228 391.995 391.995 349.228 329.628 293.665 261.626 261.626 293.665 329.628 293.665 261.626 261.626 293.665 293.665 329.628 261.626 293.665 329.628 349.228 329.628 261.626 293.665 329.628 349.228 329.628 293.665 261.626 293.665 195.998 329.628 329.628 349.228 391.995 391.995 349.228 329.628 293.665 261.626 261.626 293.665 329.628 293.665 261.626 261.626".split(" "),欢乐颂*/
                    i = 0,
                    o = 1,
                    a = "♪ ♩ ♫ ♬ ♭ € § ¶ ♯".split(" "),
                    n = !1
                $("site-title, #moblieGoTop, .site-branding, .searchbox, .changeSkin-gear, .menu-list>li#star-bg").mouseenter(
                    function(s) {
                        var r = t[i]
                        r || (i = 0, r = t[i]), i += o
                        var c = e.createOscillator(),
                            l = e.createGain()
                        if (c.connect(l), l.connect(e.destination), c.type = "sine", c.frequency.value = r, l.gain.setValueAtTime(0, e.currentTime),
                            l.gain.linearRampToValueAtTime(1, e.currentTime + .01), c.start(e.currentTime), l.gain.exponentialRampToValueAtTime(
                                .001, e.currentTime + 1), c.stop(e.currentTime + 1), n = !0) {
                            var d = Math.round(7 * Math.random()),
                                u = $("<b/>").text(a[d]),
                                h = s.pageX,
                                p = s.pageY - 5
                            u.css({
                                "z-index": 99999,
                                top: p - 20,
                                left: h,
                                position: "absolute",
                                color: "#FF6EB4"
                            }), cached_body.append(u), u.animate({
                                top: p - 180,
                                opacity: 0
                            }, 1500, function() {
                                u.remove()
                            }), s.stopPropagation()
                        }
                        n = !1
                    })
            }
        }()
}

Never give up your dreams.