fix(docs): make bullet throb loop continuously via CSS only
Replace scroll-triggered JS animation with infinite CSS keyframe loop (2.4s cycle). Remove IntersectionObserver code. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -226,38 +226,6 @@
|
||||
});
|
||||
}
|
||||
|
||||
/* -------------------------------------------------- */
|
||||
/* 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) {
|
||||
var li = entry.target;
|
||||
if (entry.isIntersecting) {
|
||||
/* stagger each bullet by its index within the list */
|
||||
var siblings = Array.from(li.parentElement.children);
|
||||
var idx = siblings.indexOf(li);
|
||||
setTimeout(function () {
|
||||
li.classList.add('in-view');
|
||||
}, idx * 120);
|
||||
} else {
|
||||
/* reset when scrolled out so it throbs again on re-entry */
|
||||
li.classList.remove('in-view');
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.3 }
|
||||
);
|
||||
|
||||
items.forEach(function (item) {
|
||||
observer.observe(item);
|
||||
});
|
||||
}
|
||||
|
||||
/* -------------------------------------------------- */
|
||||
/* Init on DOMContentLoaded */
|
||||
/* -------------------------------------------------- */
|
||||
@@ -269,6 +237,5 @@
|
||||
initReveal();
|
||||
initSmoothScroll();
|
||||
initActiveNav();
|
||||
initBulletThrob();
|
||||
});
|
||||
})();
|
||||
|
||||
@@ -534,13 +534,12 @@ ul, ol {
|
||||
}
|
||||
|
||||
@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); }
|
||||
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(42, 157, 143, 0); }
|
||||
50% { transform: scale(1.5); box-shadow: 0 0 8px 2px rgba(42, 157, 143, 0.3); }
|
||||
}
|
||||
|
||||
.content-list li.in-view::before {
|
||||
animation: bullet-throb 0.6s ease-out;
|
||||
.content-list li::before {
|
||||
animation: bullet-throb 2.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.features-section--alt {
|
||||
|
||||
Reference in New Issue
Block a user