https://zhangwenyao1.github.io/ImageWAM/script.js

1const progress = document.querySelector('.progress');
2const updateProgress = () => {
3  const max = document.documentElement.scrollHeight - window.innerHeight;
4  const pct = max > 0 ? (window.scrollY / max) * 100 : 0;
5  progress.style.width = `${Math.min(100, Math.max(0, pct))}%`;
6};
7window.addEventListener('scroll', updateProgress, { passive: true });
8window.addEventListener('resize', updateProgress);
9updateProgress();
10
11const cards = document.querySelectorAll('.card, .result-card, .figure-card, .metrics-strip article');
12const observer = new IntersectionObserver((entries) => {
13  for (const entry of entries) {
14    if (entry.isIntersecting) {
15      entry.target.classList.add('is-visible');
16      observer.unobserve(entry.target);
17    }
18  }
19}, { threshold: 0.12 });
20
21cards.forEach((card) => {
22  card.style.opacity = '0';
23  card.style.transform = 'translateY(18px)';
24  card.style.transition = 'opacity 520ms ease, transform 520ms ease';
25  observer.observe(card);
26});
27
28const style = document.createElement('style');
29style.textContent = `.is-visible { opacity: 1 !important; transform: translateY(0) !important; }`;
30document.head.appendChild(style);