La mult ani mie

Script Aniversar Interactiv (Baloane & Confeti) Realizat de petre-vitan

Previzualizare animație aniversară în timp real (Simulare izolată):

La mulți ani!

Codul sursă de copiat pentru Blogspot:

<!-- SCRIPT ANIVERSAR - REALIZAT DE PETRE-VITAN --> <div class="blog-bday-container"> <canvas id="blogBdayCanvas"></canvas> <div class="blog-bday-text-group"> <div class="blog-bday-text">La mulți ani!</div> </div> </div> <style> @import url("https://googleapis.com"); .blog-bday-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; background: transparent; display: flex; justify-content: center; align-items: center; } #blogBdayCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .blog-bday-text-group { z-index: 10; pointer-events: none; animation: bdayP 2s ease-in-out infinite alternate; } .blog-bday-text { font-family: "Caveat", cursive; font-size: 4rem; color: #fff; line-height: 1.1; } @keyframes bdayP { 0% { transform: scale(0.95); filter: drop-shadow(0 0 5px rgba(255,0,170,0.6)) drop-shadow(0 0 15px rgba(153,0,255,0.4)); } 100% { transform: scale(1.05); filter: drop-shadow(0 0 8px rgba(255,0,170,0.9)) drop-shadow(0 0 20px rgba(0,255,204,0.6)); } } </style> <script type='text/javascript'> //<![CDATA[ // Cod programat de PETRE-VITAN pentru distribuție liberă (function() { const canvas = document.getElementById("blogBdayCanvas"); if (!canvas) return; const ctx = canvas.getContext("2d"); function res() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } window.addEventListener("resize", res); res(); let items = []; const colors = ["#FF0055", "#00FFCC", "#9900FF", "#FFCC00", "#FF00AA", "#00FF66", "#00FFFF"]; class C { constructor() { this.reset(); this.y = Math.random() * canvas.height; } reset() { this.x = Math.random() * canvas.width; this.y = -20; this.s = Math.random() * 6 + 4; this.c = colors[Math.floor(Math.random()*colors.length)]; this.sy = Math.random() * 2 + 1.5; this.sx = Math.random() * 1 - 0.5; this.r = Math.random() * 360; this.rs = Math.random() * 4 - 2; } up() { this.y += this.sy; this.x += this.sx; this.r += this.rs; if(this.y > canvas.height) this.reset(); } draw() { ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.r * Math.PI / 180); ctx.fillStyle = this.c; ctx.fillRect(-this.s/2, -this.s/2, this.s, this.s/2); ctx.restore(); } } class B { constructor() { this.reset(); this.y = canvas.height + Math.random() * canvas.height; } reset() { this.x = Math.random() * canvas.width; this.y = canvas.height + 50; this.rad = Math.random() * 12 + 12; this.c = colors[Math.floor(Math.random()*colors.length)]; this.sy = Math.random() * 1 + 0.8; this.ws = Math.random() * 0.02; } up() { this.y -= this.sy; this.x += Math.sin(this.y * this.ws) * 0.4; if(this.y < -60) this.reset(); } draw() { ctx.save(); ctx.beginPath(); ctx.ellipse(this.x, this.y, this.rad*0.8, this.rad, 0, 0, Math.PI*2); ctx.fillStyle = this.c; ctx.globalAlpha = 0.65; ctx.shadowBlur = 10; ctx.shadowColor = this.c; ctx.fill(); ctx.beginPath(); ctx.moveTo(this.x, this.y + this.rad); ctx.lineTo(this.x, this.y + this.rad + 15); ctx.strokeStyle = "rgba(255,255,255,0.3)"; ctx.stroke(); ctx.restore(); } } for(let i=0; i<45; i++) items.push(new C()); for(let i=0; i<10; i++) items.push(new B()); function run() { ctx.clearRect(0, 0, canvas.width, canvas.height); for(let i=0; i<items.length; i++) { items[i].up(); items[i].draw(); } requestAnimationFrame(run); } requestAnimationFrame(run); })(); //]]> </script>

🛠️ Cum se instalează scriptul aniversar 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 schița pe blog.