| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
document.querySelectorAll('.bkbg-ab-wrapper').forEach(function (wrapper) { |
| 5 |
/* ── Score count-up animation ────────────────────────────── */ |
| 6 |
var scoreEl = wrapper.querySelector('.bkbg-ab-score-number'); |
| 7 |
if (!scoreEl) return; |
| 8 |
|
| 9 |
var target = parseFloat(scoreEl.textContent) || 0; |
| 10 |
var duration = 1200; |
| 11 |
var hasRun = false; |
| 12 |
|
| 13 |
function animateScore() { |
| 14 |
if (hasRun) return; |
| 15 |
hasRun = true; |
| 16 |
var start = null; |
| 17 |
var isDecimal = String(target).includes('.'); |
| 18 |
var decimals = isDecimal ? (String(target).split('.')[1] || '').length : 0; |
| 19 |
|
| 20 |
function step(ts) { |
| 21 |
if (!start) start = ts; |
| 22 |
var progress = Math.min((ts - start) / duration, 1); |
| 23 |
var ease = 1 - Math.pow(1 - progress, 3); /* ease-out cubic */ |
| 24 |
var val = target * ease; |
| 25 |
scoreEl.textContent = isDecimal ? val.toFixed(decimals) : Math.round(val); |
| 26 |
if (progress < 1) requestAnimationFrame(step); |
| 27 |
else scoreEl.textContent = isDecimal ? target.toFixed(decimals) : target; |
| 28 |
} |
| 29 |
requestAnimationFrame(step); |
| 30 |
} |
| 31 |
|
| 32 |
if ('IntersectionObserver' in window) { |
| 33 |
var io = new IntersectionObserver(function (entries) { |
| 34 |
entries.forEach(function (entry) { |
| 35 |
if (!entry.isIntersecting) return; |
| 36 |
animateScore(); |
| 37 |
io.unobserve(entry.target); |
| 38 |
}); |
| 39 |
}, { threshold: 0.3 }); |
| 40 |
io.observe(scoreEl); |
| 41 |
} else { |
| 42 |
animateScore(); |
| 43 |
} |
| 44 |
|
| 45 |
/* ── Card entrance animation ─────────────────────────────── */ |
| 46 |
if ('IntersectionObserver' in window) { |
| 47 |
var card = wrapper.querySelector('.bkbg-ab-card'); |
| 48 |
if (card) { |
| 49 |
card.style.opacity = '0'; |
| 50 |
card.style.transform = 'translateY(18px)'; |
| 51 |
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; |
| 52 |
var ioCard = new IntersectionObserver(function (entries) { |
| 53 |
entries.forEach(function (entry) { |
| 54 |
if (!entry.isIntersecting) return; |
| 55 |
entry.target.style.opacity = '1'; |
| 56 |
entry.target.style.transform = 'translateY(0)'; |
| 57 |
ioCard.unobserve(entry.target); |
| 58 |
}); |
| 59 |
}, { threshold: 0.1 }); |
| 60 |
ioCard.observe(card); |
| 61 |
} |
| 62 |
} |
| 63 |
}); |
| 64 |
})(); |
| 65 |
|
