Script ploaie

Script Ploaie Interactivă cu Efect de Splash Realizat de petre-vitan

Previzualizare animație ploaie (Efect simulat local într-o casetă):

Codul sursă de copiat:

<!-- ======================================================= --> <!-- SCRIPT PLOAIE INTERACTIVĂ CU EFECT DE SPLASH - HD --> <!-- REALIZAT DE PETRE-VITAN --> <!-- ======================================================= --> <div class="blog-rain-global-container"></div> <style> .blog-rain-global-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 99998; background: transparent; overflow: hidden; } .blog-raindrop { position: absolute; width: 2px; height: 30px; background: rgba(255, 255, 255, 0.6); border-radius: 50% 50% 0 0; animation: blogRainFall linear infinite; opacity: 0.7; } @keyframes blogRainFall { 0% { transform: translateY(-50px); opacity: 0.7; } 100% { transform: translateY(105vh); opacity: 0; } } .blog-splash { position: absolute; width: 5px; height: 2px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); animation: blogSplashAnim 0.3s ease-out; opacity: 0; } @keyframes blogSplashAnim { 0% { transform: scale(0.1); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } } </style> <script> // Script programat de PETRE-VITAN (function() { const container = document.querySelector(".blog-rain-global-container"); const count = 150; if (!container) return; for (let i = 0; i < count; i++) { const drop = document.createElement("div"); drop.classList.add("blog-raindrop"); drop.style.left = Math.random() * 100 + "vw"; const scale = Math.random() * 0.5 + 0.5; drop.style.transform = "scale(" + scale + ")"; drop.style.animationDuration = (Math.random() * 2 + 1) + "s"; drop.style.animationDelay = "-" + (Math.random() * 2) + "s"; container.appendChild(drop); drop.addEventListener("animationiteration", () => { createSplash(drop.style.left); }); } function createSplash(leftX) { const splash = document.createElement("div"); splash.classList.add("blog-splash"); splash.style.left = leftX; splash.style.top = (window.innerHeight - 5) + "px"; container.appendChild(splash); setTimeout(() => { splash.remove(); }, 300); } })(); </script>

🛠️ Cum se instalează codul de ploaie pe Blogspot:

1. Copiați întregul script prin acționarea butonului de sus Copiază Codul.
2. Accesați panoul administrativ al platformei Blogger.
3. În panoul din stânga, mergeți la secțiunea Temă (Theme).
4. Faceți clic pe triunghiul de configurare de lângă opțiunea portocalie „Personalizează” și deschideți Editați HTML (Edit HTML).
5. Apăsați comanda rapidă Ctrl + F în interiorul editorului de cod.
6. Efectuați o căutare după eticheta de închidere structurală: </body>.
7. Lipiți codul copiat anterior chiar deasupra (înainte de) eticheta găsită </body>.
8. Salvați noul șablon dând clic pe butonul cu formă de dischetă (Salvare) din dreapta sus. Efectul de ploaie va rula fluid pe fundalul întregului blog!