Ball animate

Widget Efect Mingi Animate Interactive (Physics Canvas) Realizat de petre-vitan

Previzualizare efect (Mișcați cursorul în caseta neagră pentru a împinge mingile):

TESTER BALL ANIMATE

Codul sursă de copiat pentru Blogspot:

<!-- ======================================================= --> <!-- SCRIPT FUNDAL INTERACTIV CU MINGI ANIMATE (CANVAS) --> <!-- REALIZAT DE PETRE-VITAN --> <!-- ======================================================= --> <canvas id="blogBallsAnimateCanvas"></canvas> <style> #blogBallsAnimateCanvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; /* Nu blochează click-urile pe link-uri */ z-index: 99999; background: transparent; } </style> <script type='text/javascript'> //<![CDATA[ (function() { const canvas = document.getElementById("blogBallsAnimateCanvas"); if (!canvas) return; const ctx = canvas.getContext("2d"); function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } window.addEventListener("resize", resize); resize(); let balls = []; // Paletă de culori premium pentru mingi const colors = ["#FF0055", "#00FFCC", "#9900FF", "#FFCC00", "#FF00AA", "#00FF66", "#00FFFF"]; // Raza de interacțiune a mouse-ului în pixeli const mouse = { x: null, y: null, radius: 80 }; // Setare număr total de mingi pe ecran const numarMingi = 40; for (let i = 0; i < numarMingi; i++) { let radius = Math.random() * 15 + 8; // Dimensiune mingi între 8px și 23px balls.push({ x: Math.random() * (canvas.width - radius * 2) + radius, y: Math.random() * (canvas.height - radius * 2) + radius, vx: (Math.random() * 2 - 1) * 2, // Viteză orizontală inițială vy: (Math.random() * 2 - 1) * 2, // Viteză verticală inițială radius: radius, color: colors[Math.floor(Math.random() * colors.length)] }); } // Monitorizare mișcare mouse la nivel global pe pagină window.addEventListener("mousemove", function(e) { mouse.x = e.clientX; mouse.y = e.clientY; }); // Dacă mouse-ul părăsește fereastra, dezactivăm respingerea window.addEventListener("mouseout", function() { mouse.x = null; mouse.y = null; }); function update() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < balls.length; i++) { let b = balls[i]; b.x += b.vx; b.y += b.vy; // Ricoșeu din margini stânga/dreapta if (b.x + b.radius > canvas.width || b.x - b.radius < 0) { b.vx *= -1; } // Ricoșeu din margini sus/jos if (b.y + b.radius > canvas.height || b.y - b.radius < 0) { b.vy *= -1; } // Prevenire blocare în afara ferestrei la redimensionare if (b.x - b.radius < 0) b.x = b.radius; if (b.x + b.radius > canvas.width) b.x = canvas.width - b.radius; if (b.y - b.radius < 0) b.y = b.radius; if (b.y + b.radius > canvas.height) b.y = canvas.height - b.radius; // Fizică de respingere la apropierea cursorului if (mouse.x !== null && mouse.y !== null) { let dx = b.x - mouse.x; let dy = b.y - mouse.y; let dist = Math.sqrt(dx * dx + dy * dy); if (dist < mouse.radius + b.radius) { let force = (mouse.radius + b.radius - dist) / mouse.radius; let angle = Math.atan2(dy, dx); b.vx += Math.cos(angle) * force * 0.6; b.vy += Math.sin(angle) * force * 0.6; } } // Amortizare / Fricțiune ușoară ca să nu accelereze la nesfârșit b.vx *= 0.99; b.vy *= 0.99; // Menținere viteză minimă de mișcare să nu se oprească de tot let speed = Math.sqrt(b.vx * b.vx + b.vy * b.vy); if (speed < 1) { let angle = Math.random() * Math.PI * 2; b.vx = Math.cos(angle) * 1.2; b.vy = Math.sin(angle) * 1.2; } // Limitare viteză maximă pentru estetică fluentă if (speed > 5) { b.vx = (b.vx / speed) * 5; b.vy = (b.vy / speed) * 5; } // Redare grafică minge ctx.save(); ctx.beginPath(); ctx.arc(b.x, b.y, b.radius, 0, Math.PI * 2); ctx.fillStyle = b.color; ctx.shadowBlur = 12; ctx.shadowColor = b.color; ctx.fill(); ctx.restore(); } requestAnimationFrame(update); } requestAnimationFrame(update); })(); //]]> </script>

🛠️ Cum se instalează efectul Ball Animate pe Blogspot:

1. Copiați scriptul dând clic pe butonul Copiază Codul situat direct deasupra casetei de text.
2. Intrați în contul dumneavoastră Blogger.
3. În meniul din stânga, accesați secțiunea Temă (Theme).
4. Faceți clic pe săgeata mică de lângă butonul „Personalizează” și alegeți Editați HTML (Edit HTML).
5. Dați un clic în editorul de cod și apăsați scurtătura Ctrl + F ca să deschideți bara de căutare.
6. Căutați tag-ul de închidere structurală </body>.
7. Lipiți codul copiat exact deasupra / înainte de această etichetă </body>.
8. Salvați tema apăsând pe pictograma de dischetă (Salvare) din colțul din dreapta sus.