feat(docs): add bullet throb animation on scroll
Teal bullet dots pulse with a staggered throb when list items scroll into view. Uses IntersectionObserver with 120ms stagger per item. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -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();
|
||||
});
|
||||
})();
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user