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 */
|
/* Init on DOMContentLoaded */
|
||||||
/* -------------------------------------------------- */
|
/* -------------------------------------------------- */
|
||||||
@@ -237,5 +267,6 @@
|
|||||||
initReveal();
|
initReveal();
|
||||||
initSmoothScroll();
|
initSmoothScroll();
|
||||||
initActiveNav();
|
initActiveNav();
|
||||||
|
initBulletThrob();
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
|||||||
@@ -530,6 +530,17 @@ ul, ol {
|
|||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--accent);
|
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 {
|
.features-section--alt {
|
||||||
|
|||||||
Reference in New Issue
Block a user