diff --git a/index.html b/index.html index fa27939..db96451 100644 --- a/index.html +++ b/index.html @@ -88,7 +88,7 @@ Pure Yinglet
- + Swagger Units
diff --git a/script.js b/script.js index 8466904..4748acc 100644 --- a/script.js +++ b/script.js @@ -1056,6 +1056,11 @@ var numbers = document.querySelectorAll('.stat .number[data-target]'); numbers.forEach(function(el) { var target = parseInt(el.getAttribute('data-target')); + var randMax = parseInt(el.getAttribute('data-target-max')); + if (randMax) { + var randMin = parseInt(el.getAttribute('data-target-min')) || 0; + target = randMin + Math.floor(Math.random() * (randMax - randMin + 1)); + } var suffix = el.getAttribute('data-suffix') || ''; var current = 0; if (target <= 0) return; @@ -1070,7 +1075,70 @@ current = target; clearInterval(timer); if (final) { + var digits = el.textContent.replace(/[^0-9]/g, '').split(''); + if (digits.length === 0) digits = ['0']; + var rect = el.getBoundingClientRect(); + var fontSize = parseInt(window.getComputedStyle(el).fontSize); + var charW = rect.width / digits.length; + var frags = []; + el.style.opacity = '0'; + for (var d = 0; d < digits.length; d++) { + var frag = document.createElement('div'); + frag.className = 'fragment'; + frag.textContent = digits[d]; + var dx = rect.left + d * charW + charW / 2; + var dy = rect.top + rect.height / 2; + var angle = Math.random() * Math.PI * 2; + var speed = 3 + Math.random() * 8; + frag.style.cssText = 'position:fixed;left:' + dx + 'px;top:' + dy + 'px;font-size:' + fontSize + 'px;font-weight:900;color:#f5a623;font-family:Inter,system-ui,sans-serif;pointer-events:none;z-index:999;opacity:1;transform:translate(-50%,-50%);text-shadow:0 0 20px rgba(245,166,35,0.5);'; + document.body.appendChild(frag); + frags.push({ + el: frag, + x: dx, + y: dy, + vx: Math.cos(angle) * speed + (Math.random() - 0.5) * 3, + vy: Math.sin(angle) * speed - 6, + rot: 0, + rotSpeed: (Math.random() - 0.5) * 30, + }); + } + var gravity = 0.35; + var running = true; + var startTime = Date.now(); + function animateFrags() { + if (!running) return; + var alive = false; + var elapsed = Date.now() - startTime; + for (var k = 0; k < frags.length; k++) { + var f = frags[k]; + f.vy += gravity; + f.x += f.vx; + f.y += f.vy; + f.rot += f.rotSpeed; + f.vx *= 0.99; + var alpha = Math.max(0, 1 - elapsed / 2500); + f.el.style.left = f.x + 'px'; + f.el.style.top = f.y + 'px'; + f.el.style.transform = 'translate(-50%,-50%) rotate(' + f.rot + 'deg)'; + f.el.style.opacity = alpha; + if (alpha > 0 && f.y < window.innerHeight + 200) { + alive = true; + } + } + if (alive) { + requestAnimationFrame(animateFrags); + } + } + animateFrags(); el.textContent = final; + el.style.opacity = ''; + el.classList.add('fade-in-final'); + setTimeout(function() { + running = false; + for (var j = 0; j < frags.length; j++) { + frags[j].el.remove(); + } + }, 2500); return; } } diff --git a/style.css b/style.css index 3a8e61e..560f6de 100644 --- a/style.css +++ b/style.css @@ -35,6 +35,32 @@ 50% { box-shadow: 0 0 40px rgba(var(--glow-rgb), 0.25); } } +@keyframes explodeNum { + 0% { transform: scale(1); opacity: 1; letter-spacing: normal; filter: blur(0); } + 40% { transform: scale(1.6); opacity: 0.6; letter-spacing: 0.15em; filter: blur(1px); color: #ff6b6b; } + 100% { transform: scale(2.5); opacity: 0; letter-spacing: 0.4em; filter: blur(6px); color: #ff6b6b; } +} + +@keyframes fadeInFinal { + 0% { opacity: 0; transform: scale(0.3); filter: blur(10px); } + 100% { opacity: 1; transform: scale(1); filter: blur(0); } +} + +.number.exploding { + animation: explodeNum 0.7s ease-out forwards; + position: relative; + z-index: 2; +} + +.number.fade-in-final { + animation: fadeInFinal 0.5s ease-out forwards; +} + +.fragment { + pointer-events: none; + will-change: transform, opacity, left, top; +} + .reveal { opacity: 0; transform: translateY(30px); @@ -228,6 +254,7 @@ section h2 { border-radius: 1rem; padding: 2rem 1rem; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; + position: relative; } .stat:hover {