หน้า landing สไตล์ภาพยนตร์สำหรับเอเจนซีอสังหาฯ หรูในสวิสแบบสมมุติ ซ้อน hero แบบ scrub เฟรม แผนที่ 3D MapLibre และเครื่องคำนวณ ROI ในหน้าเดียว
ภาพรวม
โปรเจกต์ demo ที่พิสูจน์ว่าสองเทคนิคหนัก ๆ อยู่ด้วยกันในคุณภาพ production ได้ canvas image-sequence scrub สำหรับ hero และ 3D MapLibre พร้อม pin shader เอง ทั้งคู่อยู่ในหน้าเดียวโดยไม่ทำให้ scroll สะดุด
สิ่งที่ทำได้
- hero สไตล์ภาพยนตร์ scrub 192 เฟรมตามการเลื่อน
- แผนที่ 3D MapLibre เอียง พร้อม pin shader เอง
- เครื่องคำนวณ ROI สินเชื่ออัปเดตสด
- การ์ดอสังหาฯ มี depth ตอน scroll
- fallback สำหรับมือถือ
ไฮไลต์
- JS gzipped รวมต่ำกว่า 420 KB ทั้งหน้า
- สองเทคนิคหนักในหน้าเดียวโดยไม่กระตุก
- สร้างเป็น sample สำหรับการสมัครงาน ไม่ใช่งานลูกค้าจริง
