halo-theme-dream2.0-plus/templates/assets/js/effects/rain.min.js

梦之城，童话梦境，动漫类型博客主题。

(()=>{const s=function(){const o={density:5,speed:.5,frameDuration:50};let r=null,t=0,i=null,a=!0;function d(){var n=Date.now();if(n-t>=o.frameDuration){i=null!==(e=localStorage.getItem("night"))?"true"===e:null!==i?i:document.documentElement.classList.contains("night");var e=DreamConfig.effects_rain_mode;if("all"===e||"day"===e&&!i||"night"===e&&i){a=!0;for(let n=0;n<o.density;n++)!function(){const n=document.createElement("div");n.className="rain";var e=Math.random()*window.innerWidth,t=1.2*Math.random()+.3,i=15*Math.random()+10,a=(.3*Math.random()+.3)/o.speed;n.style.left=e+"px",n.style.top="-50px",n.style.width=t+"px",n.style.height=i+"px",n.style.animationDuration=a+"s",r.appendChild(n),n.addEventListener("animationend",function(){n.remove()})}()}else a&&(a=!1,s.clear());t=n}requestAnimationFrame(d)}return{init:function(n={}){n.density&&(o.density=n.density),n.speed&&(o.speed=n.speed),(n=document.createElement("style")).textContent="\n            .rain-effect-container {\n                position: fixed;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 100%;\n                pointer-events: none;\n                z-index: 1000;\n            }\n            \n            .rain {\n                position: absolute;\n                width: 1px;\n                height: 20px;\n                background: linear-gradient(to bottom, transparent, rgba(210, 210, 210, 0.8));\n                animation: rainFall linear forwards;\n                pointer-events: none;\n            }\n            \n            @keyframes rainFall {\n                0% {\n                    transform: translateY(-100px) rotate(10deg);\n                    opacity: 0;\n                }\n                10% {\n                    opacity: 1;\n                }\n                95% {\n                    opacity: 1;\n                }\n                100% {\n                    transform: translateY(100vh) rotate(10deg);\n                    opacity: 0;\n                }\n            }\n        ",document.head.appendChild(n),r=((n=document.createElement("div")).id="effects_rain",n.className="rain-effect-container",document.body.appendChild(n),n),d(),window.addEventListener("resize",function(){r.querySelectorAll(".rain").forEach(n=>{n.style.left=Math.random()*window.innerWidth+"px"})})},destroy:function(){r&&r.remove();var n=document.querySelector("style[data-rain-effect]");n&&n.remove()},clear:function(){r.querySelectorAll(".rain").forEach(n=>{n.remove()})},setDensity:function(n){o.density=n},setSpeed:function(n){o.speed=n}}}();s.init({density:Utils.isMobile()?1:2,speed:.5})})();