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