diff --git a/docs/website/script.js b/docs/website/script.js index 867814d..7a9b777 100644 --- a/docs/website/script.js +++ b/docs/website/script.js @@ -226,6 +226,36 @@ }); } + /* -------------------------------------------------- */ + /* 8. Bullet throb on scroll (landing page) */ + /* -------------------------------------------------- */ + function initBulletThrob() { + var items = document.querySelectorAll('.content-list li'); + if (!items.length) return; + + var observer = new IntersectionObserver( + function (entries) { + entries.forEach(function (entry) { + if (entry.isIntersecting) { + /* stagger each bullet by its index within the list */ + var li = entry.target; + var siblings = Array.from(li.parentElement.children); + var idx = siblings.indexOf(li); + setTimeout(function () { + li.classList.add('in-view'); + }, idx * 120); + observer.unobserve(li); + } + }); + }, + { threshold: 0.3 } + ); + + items.forEach(function (item) { + observer.observe(item); + }); + } + /* -------------------------------------------------- */ /* Init on DOMContentLoaded */ /* -------------------------------------------------- */ @@ -237,5 +267,6 @@ initReveal(); initSmoothScroll(); initActiveNav(); + initBulletThrob(); }); })(); diff --git a/docs/website/style.css b/docs/website/style.css index 35d8401..acf4381 100644 --- a/docs/website/style.css +++ b/docs/website/style.css @@ -530,6 +530,17 @@ ul, ol { height: 8px; border-radius: 50%; background: var(--accent); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +@keyframes bullet-throb { + 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.5); } + 50% { transform: scale(1.6); box-shadow: 0 0 8px 2px rgba(42, 157, 143, 0.3); } + 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(42, 157, 143, 0); } +} + +.content-list li.in-view::before { + animation: bullet-throb 0.6s ease-out; } .features-section--alt {