feat: 添加首页雪花效果插件

添加雪花效果插件,包含CSS样式、PHP插件文件和JS动画逻辑
This commit is contained in:
tikkhun 2025-12-10 17:02:17 +08:00
commit 809df28a1a
3 changed files with 132 additions and 0 deletions

10
css/snow.css Normal file
View File

@ -0,0 +1,10 @@
#effectiveAppsSnow {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1000;
}

83
js/snow-canvas.js Normal file
View File

@ -0,0 +1,83 @@
(function(){
function init(){
var canvas = document.getElementById('effectiveAppsSnow');
if (!canvas) return;
var context = canvas.getContext('2d');
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
var devicePixelRatio = window.devicePixelRatio || 1;
function resizeCanvas(){
viewportWidth = window.innerWidth;
viewportHeight = window.innerHeight;
var displayWidth = viewportWidth;
var displayHeight = viewportHeight;
canvas.style.width = displayWidth + 'px';
canvas.style.height = displayHeight + 'px';
canvas.width = Math.floor(displayWidth * devicePixelRatio);
canvas.height = Math.floor(displayHeight * devicePixelRatio);
context.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
}
resizeCanvas();
var snowflakeCount = Math.floor(Math.min(400, Math.max(120, (viewportWidth * viewportHeight) / 12000)));
var snowflakes = [];
for (var i = 0; i < snowflakeCount; i++){
snowflakes.push({
positionX: Math.random() * viewportWidth,
positionY: Math.random() * viewportHeight,
radius: Math.random() * 2 + 1,
driftSpeed: Math.random() * 0.6 + 0.4,
swingAmplitude: Math.random() * 0.8 + 0.2
});
}
function updateSnowflakes(){
for (var j = 0; j < snowflakes.length; j++){
var flake = snowflakes[j];
flake.positionY += flake.driftSpeed * 2 + flake.radius * 0.25;
flake.positionX += Math.sin(flake.positionY * 0.01) * flake.swingAmplitude;
if (flake.positionY > viewportHeight + 5){
flake.positionY = -5;
flake.positionX = Math.random() * viewportWidth;
flake.radius = Math.random() * 2 + 1;
flake.driftSpeed = Math.random() * 0.6 + 0.4;
flake.swingAmplitude = Math.random() * 0.8 + 0.2;
}
}
}
function drawSnowflakes(){
context.clearRect(0, 0, viewportWidth, viewportHeight);
context.fillStyle = 'rgba(255,255,255,0.9)';
context.beginPath();
for (var k = 0; k < snowflakes.length; k++){
var flake = snowflakes[k];
context.moveTo(flake.positionX, flake.positionY);
context.arc(flake.positionX, flake.positionY, flake.radius, 0, Math.PI * 2);
}
context.fill();
}
function animate(){
updateSnowflakes();
drawSnowflakes();
requestAnimationFrame(animate);
}
window.addEventListener('resize', function(){
resizeCanvas();
viewportWidth = window.innerWidth;
viewportHeight = window.innerHeight;
});
animate();
}
if (document.readyState === 'loading'){
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();

39
yoone-snow.php Normal file
View File

@ -0,0 +1,39 @@
<?php
/*
Plugin Name: Yoone Snow
Description: 首页 canvas 雪花效果
Version: 1.1.0
Author: Yoone
*/
if (!defined('ABSPATH')) { exit; }
function yoone_snow_is_enabled() {
return function_exists('is_front_page') ? is_front_page() : false;
}
function yoone_snow_enqueue_assets() {
if (!yoone_snow_is_enabled()) { return; }
$style_handle = 'yoone-snow-style';
$style_src = plugins_url('css/snow.css', __FILE__);
wp_register_style($style_handle, $style_src, array(), '1.1.0', 'all');
wp_enqueue_style($style_handle);
$script_handle = 'yoone-snow-script';
$script_src = plugins_url('js/snow-canvas.js', __FILE__);
wp_register_script($script_handle, $script_src, array(), '1.1.0', true);
wp_enqueue_script($script_handle);
}
function yoone_snow_render_overlay() {
if (!yoone_snow_is_enabled()) { return; }
static $yoone_snow_rendered = false;
if ($yoone_snow_rendered) { return; }
$yoone_snow_rendered = true;
echo '<canvas id="effectiveAppsSnow" aria-hidden="true"></canvas>';
}
add_action('wp_enqueue_scripts', 'yoone_snow_enqueue_assets');
add_action('wp_body_open', 'yoone_snow_render_overlay');
add_action('wp_footer', 'yoone_snow_render_overlay', 100);