@@ -22,3 +22,67 @@ import Footer from "../components/Footer.astro";
2222 </main >
2323 <Footer />
2424</Layout >
25+
26+ <script >
27+ function lerp(a: number, b: number, t: number) {
28+ return a + (b - a) * t;
29+ }
30+
31+ function updateScrollReveal() {
32+ const vh = window.innerHeight;
33+
34+ document.querySelectorAll<HTMLElement>('.scroll-reveal').forEach((el) => {
35+ const rect = el.getBoundingClientRect();
36+ const t = Math.max(0, Math.min(1, (vh - rect.top) / (vh * 0.5)));
37+ el.style.opacity = String(t);
38+ el.style.transform = `translateY(${lerp(32, 0, t)}px)`;
39+ });
40+
41+ document.querySelectorAll<HTMLElement>('.scroll-reveal-left').forEach((el) => {
42+ const rect = el.getBoundingClientRect();
43+ const t = Math.max(0, Math.min(1, (vh - rect.top) / (vh * 0.5)));
44+ el.style.opacity = String(t);
45+ el.style.transform = `translateX(${lerp(-48, 0, t)}px)`;
46+ });
47+
48+ document.querySelectorAll<HTMLElement>('.scroll-reveal-right').forEach((el) => {
49+ const rect = el.getBoundingClientRect();
50+ const t = Math.max(0, Math.min(1, (vh - rect.top) / (vh * 0.5)));
51+ el.style.opacity = String(t);
52+ el.style.transform = `translateX(${lerp(48, 0, t)}px)`;
53+ });
54+
55+ document.querySelectorAll<HTMLElement>('.scroll-reveal-scale').forEach((el) => {
56+ const rect = el.getBoundingClientRect();
57+ const t = Math.max(0, Math.min(1, (vh - rect.top) / (vh * 0.5)));
58+ el.style.opacity = String(t);
59+ el.style.transform = `scale(${lerp(0.92, 1, t)})`;
60+ });
61+
62+ // Staggered children
63+ document.querySelectorAll<HTMLElement>('.scroll-stagger').forEach((parent) => {
64+ const rect = parent.getBoundingClientRect();
65+ const baseT = Math.max(0, Math.min(1, (vh - rect.top) / (vh * 0.5)));
66+ parent.querySelectorAll<HTMLElement>(':scope > *').forEach((child, i) => {
67+ const t = Math.max(0, Math.min(1, baseT - i * 0.08));
68+ child.style.opacity = String(t);
69+ child.style.transform = `translateY(${lerp(24, 0, t)}px)`;
70+ });
71+ });
72+
73+ // Diagram SVG perspective slide-in
74+ document.querySelectorAll<HTMLElement>('.diagram-output-frame').forEach((el) => {
75+ const rect = el.getBoundingClientRect();
76+ const t = Math.max(0, Math.min(1, (vh - rect.top) / (vh * 0.5)));
77+ const translateX = lerp(120, 0, t);
78+ const rotateY = lerp(-25, -6, t);
79+ const rotateZ = lerp(3, 0, t);
80+ el.style.transform = `translateX(${translateX}%) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
81+ el.style.opacity = String(Math.min(1, t * 2));
82+ });
83+ }
84+
85+ window.addEventListener('scroll', updateScrollReveal, { passive: true });
86+ window.addEventListener('resize', updateScrollReveal, { passive: true });
87+ updateScrollReveal();
88+ </script >
0 commit comments