Script ninsoare

Widget Efect Ninsoare Ambientală (Canvas Background) Realizat de petre-vitan

Previzualizare efect (Ninsoarea fluidă rulează în caseta de test de mai jos):

PREVIZUALIZARE NINSOARE

Codul sursă de copiat pentru Blogspot:

<!-- ======================================================= --> <!-- SCRIPT NINSOARE AMBIENTALĂ EFICIENTĂ PE TOT ECRANUL --> <!-- REALIZAT DE PETRE-VITAN --> <!-- ======================================================= --> <canvas id="petre-snow-canvas"></canvas> <style> #petre-snow-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* Nu încurcă vizitatorii la click-uri pe blog */ z-index: 1000; background: transparent; } </style> <script type='text/javascript'> //<![CDATA[ window.addEventListener('DOMContentLoaded', function() { var c = document.getElementById('petre-snow-canvas'); if (!c) return; var ctx = c.getContext('2d'); var flakes = []; function resize() { c.width = window.innerWidth; c.height = window.innerHeight; } window.addEventListener('resize', resize); resize(); // Generare 250 de fulgi de nea cu valori unice for (var i = 0; i < 250; i++) { flakes.push({ x: Math.random() * c.width, y: Math.random() * c.height, r: Math.random() * 3 + 1, // Dimensiune rază d: Math.random() * 4 + 2, // Viteză cădere w: Math.random() * 2 - 1 // Balans stânga-dreapta }); } function draw() { ctx.clearRect(0, 0, c.width, c.height); ctx.fillStyle = 'rgba(255,255,255,0.85)'; ctx.beginPath(); for (var i = 0; i < flakes.length; i++) { var f = flakes[i]; ctx.moveTo(f.x, f.y); ctx.arc(f.x, f.y, f.r, 0, Math.PI * 2, true); } ctx.fill(); update(); } function update() { for (var i = 0; i < flakes.length; i++) { var f = flakes[i]; f.y += f.d; f.x += f.w; // Resetează fulgul sus dacă atinge baza ecranului if (f.y > c.height) { flakes[i] = { x: Math.random() * c.width, y: -10, r: f.r, d: f.d, w: f.w }; } // Control ecran margini laterale if (f.x > c.width) { f.x = 0; } else if (f.x < 0) { f.x = c.width; } } } // Utilizare requestAnimationFrame pentru randare fluidă la 60fps fără sacadări function loop() { draw(); requestAnimationFrame(loop); } requestAnimationFrame(loop); }); //]]> </script>

🛠️ Cum se instalează efectul de ninsoare pe Blogspot:

1. Copiați scriptul făcând clic pe butonul Copiază Codul situat direct deasupra casetei de text.
2. Accesați panoul administrativ Blogger.
3. În meniul din stânga, faceți clic pe opțiunea Temă (Theme).
4. Apăsați pe triunghiul mic de lângă butonul portocaliu „Personalizează” și selectați Editați HTML (Edit HTML).
5. Faceți un clic în interiorul editorului de cod și apăsați scurtătura Ctrl + F.
6. Căutați tag-ul de închidere structurală </body>.
7. Lipiți codul copiat exact deasupra / înainte de această etichetă </body>.
8. Apăsați pictograma de Salvare (dischetă) din colțul din dreapta-sus al ecranului pentru a publica ninsoarea.