https://www.kyotoanimation.co.jp/kotenbu/ Download,bug溢出视窗挤出滚动条,不到底,Cuckoo/includes/header.php body<div id="siteWrap"></div>
更多js:
document.addEventListener("DOMContentLoaded", function () {
const siteWrap = document.getElementById('siteWrap');
function fadeIn(el, duration) {
el.style.opacity = 0;
el.style.display = 'block';
let start = null;
requestAnimationFrame(function animate(time) {
if (!start) start = time;
let progress = (time - start) / duration;
el.style.opacity = Math.min(progress, 1);
if (progress < 1) requestAnimationFrame(animate);
});
}
fadeIn(siteWrap, 1000);
const snowOptions = {
flakeCount: 8,
maxSpeed: 6,
minSpeed: 2,
maxSize: 32,
minSize: 4,
image: 'https://shiraikuroko.com/usr/themes/Cuckoo/assets/images/0v0/sakura-'
};
function createFlake() {
const img = document.createElement('img');
const variant = Math.floor(Math.random() * 6);
img.src = snowOptions.image + variant + '.png';
img.className = 'snowfall-flakes';
document.body.appendChild(img);
const size = Math.random() * (snowOptions.maxSize - snowOptions.minSize) + snowOptions.minSize;
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight;
const speed = Math.random() * (snowOptions.maxSpeed - snowOptions.minSpeed) + snowOptions.minSpeed;
const stepSize = Math.random() / 10;
const initialRotation = Math.random() * 360;
img.style.width = size + 'px';
img.style.height = size + 'px';
img.style.top = y + 'px';
img.style.left = x + 'px';
img.style.transform = `rotate(${initialRotation}deg)`;
return {
el: img,
x: x,
y: y,
size: size,
speed: speed,
step: 0,
stepSize: stepSize,
rotation: initialRotation
};
}
const flakes = Array.from({ length: snowOptions.flakeCount }, createFlake);
function updateSnow() {
flakes.forEach(flake => {
flake.y += flake.speed;
flake.step += flake.stepSize;
flake.x += Math.cos(flake.step);
if (flake.y > window.innerHeight) {
flake.y = -flake.size;
flake.x = Math.random() * window.innerWidth;
flake.speed = Math.random() * (snowOptions.maxSpeed - snowOptions.minSpeed) + snowOptions.minSpeed;
flake.size = Math.random() * (snowOptions.maxSize - snowOptions.minSize) + snowOptions.minSize;
flake.el.style.width = flake.size + 'px';
flake.el.style.height = flake.size + 'px';
flake.rotation = Math.random() * 360;
flake.el.style.transform = `rotate(${flake.rotation}deg)`;
}
flake.el.style.top = flake.y + 'px';
flake.el.style.left = flake.x + 'px';
});
requestAnimationFrame(updateSnow);
}
updateSnow();
});更多css:
/*Sakura动画*/
.snowfall-flakes {
position: absolute;
z-index: 999;
pointer-events: none;
will-change: transform, top, left;
}
#siteWrap {
position: relative;
width: 100%;
height: 100%;
display: none;
} 























































































