commit
809df28a1a
|
|
@ -0,0 +1,10 @@
|
||||||
|
#effectiveAppsSnow {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
@ -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();
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
@ -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);
|
||||||
|
|
||||||
Loading…
Reference in New Issue