เว็บนี้สร้างอย่างไร — แกะทุกเส้น ทุกเทคนิค ให้ทำตามได้

Technique 01SVG getTotalLength() · stroke-dashoffset

เส้น drafting วาดตัวเอง

รูปด้านหน้าบ้านในส่วนแรกไม่ใช่รูปภาพ แต่เป็นภาพเวกเตอร์ (SVG) ที่วาดเส้นต่อเส้นด้วยโค้ด เดิมทีใช้แอตทริบิวต์ pathLength="1" ให้เบราว์เซอร์ปรับหน่วยเส้นประให้เอง แต่เทคนิคนี้พึ่งฟีเจอร์ SVG2 ที่ Safari เพิ่งรองรับตั้งแต่เวอร์ชัน 16 (ปี 2565) — บนเบราว์เซอร์รุ่นเก่ากว่านั้น เส้นจะกลายเป็นจุดประเล็ก ๆ แทนที่จะเป็นเส้นเต็ม จึงเปลี่ยนมาใช้ JavaScript วัดความยาวเส้นจริงด้วย path.getTotalLength() ทันทีที่หน้าโหลด แล้วค่อยตั้ง stroke-dasharray/stroke-dashoffset เป็นหน่วยพิกเซลจริง — ใช้ได้ทุกเบราว์เซอร์ ไม่ต้องพึ่งฟีเจอร์ใหม่ ค่าเริ่มต้นก่อนสคริปต์ทำงาน (หรือกรณี JS พัง) คือเส้นเต็มเสมอ (ไม่มีจุดประ) จึงไม่มีทางเห็นเส้นขาด ๆ แหว่ง ๆ แต่ละเส้นตั้งเวลาเริ่มต่างกันด้วยตัวแปร --d เพื่อให้วาดไล่ลำดับเหมือนคนเขียนแบบจริง

// วัดความยาวเส้นจริง แทนการพึ่ง pathLength (Safari <16 ไม่รองรับ)
path.style.setProperty('--len', path.getTotalLength());
path.classList.add('pl-ready');

.draw{stroke-dasharray:none; stroke-dashoffset:0}  /* ค่าเริ่มต้น = เส้นเต็ม */
.draw.pl-ready{
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  animation:drawline 1.7s forwards; animation-delay:var(--d);
}
@keyframes drawline{to{stroke-dashoffset:0}}

Technique 02CSS 3D transforms — no WebGL

บ้านไอโซเมตริกจาก div ล้วน ๆ

บ้านสามมิติกลางหน้าเว็บไม่ได้ใช้โปรแกรม 3D ใด ๆ — มันคือกล่อง <div> ธรรมดาที่ถูกหมุนในสามมิติด้วย CSS ฉากทั้งหมดถูกเอียงด้วย rotateX(60deg) rotateZ(-45deg) (มุมมองไอโซเมตริกแบบแบบก่อสร้าง) ผนังแต่ละด้านคือ div ที่ตั้งขึ้นด้วย rotateX(90deg) หรือ rotateY(-90deg) รอบขอบของมัน (transform-origin: 0 0) หลังคาจั่วคือระนาบสองแผ่นเอียง 27.8° และหน้าจั่วสามเหลี่ยมตัดรูปด้วย clip-path ทุกผิวโปร่งใสขอบขาว จึงออกมาเป็น "โครงลายเส้น" เหมือนแบบ 3D ของสถาปนิกพอดี

.iso{transform:rotateX(60deg) rotateZ(-45deg);
     transform-style:preserve-3d}
.f.wn{transform-origin:0 0; transform:rotateX(90deg)}  /* ผนัง */
.gable{transform:rotateZ(-90deg) rotateX(90deg);
       clip-path:polygon(0 100%,100% 100%,50% 0)}      /* จั่ว */

Technique 03GSAP ScrollTrigger — pin + scrub

ประกอบร่างทีละชั้นตาม scroll

จังหวะ "ว้าว" ของเว็บ: หน้าจอถูกตรึงไว้ (pin) ขณะผู้ชมเลื่อน แล้วความคืบหน้าของการเลื่อนถูกผูกกับไทม์ไลน์แอนิเมชัน (scrub) — เลื่อนมาก บ้านประกอบมาก เลื่อนกลับ บ้านถอดชิ้นกลับ ชิ้นส่วนแต่ละชั้น (ฐานราก → ผนังชั้น 1 → ชั้น 2 → หลังคา → โรงรถ → ตราอนุมัติ) หล่นลงมาตามแกน Z ของฉากสามมิติ พร้อมแถบเปอร์เซ็นต์และรายการขั้นตอนที่สว่างไล่ตามจังหวะจริง

gsap.timeline({scrollTrigger:{
  trigger:'#build', start:'top top',
  end:'+=2800', scrub:.65, pin:true
}})
.from('.el-slab',{z:'+=200', autoAlpha:0})
.from('.el-f1',  {z:'+=240', autoAlpha:0}) // ...ไล่ทีละชั้น

Technique 04CSS transform + transition · IntersectionObserver

เส้นบอกระยะ (dimension lines) ที่ยืดออกเอง

เส้นบอกระยะใต้หัวข้อสร้างจาก div เส้นเดียว + ขีดปลายเฉียงสองข้าง (ตามธรรมเนียมเขียนแบบไทยที่ใช้ขีดเฉียงแทนหัวลูกศร) เมื่อองค์ประกอบเลื่อนเข้าจอ ตัวตรวจจับ (IntersectionObserver) จะเติมคลาส .in ให้ เส้นจึงยืดจากซ้ายไปขวาด้วย transform: scaleX(0→1) แล้วตัวเลขระยะค่อยปรากฏตาม — ทั้งหมดใช้เฉพาะ transform กับ opacity จึงลื่น 60fps

Technique 05Layered CSS linear-gradient

กระดาษกราฟที่ไม่ใช้รูปภาพเลย

พื้นหลังตารางทุกส่วนคือการซ้อน gradient เส้นตรง 4 ชั้น: เส้นถี่ทุก 8px สองทิศ + เส้นหลักเข้มกว่าทุก 40px สองทิศ ได้กระดาษกราฟที่คมทุกขนาดจอ น้ำหนักไฟล์เป็นศูนย์ และเปลี่ยนสีได้ในบรรทัดเดียว

background-image:
  linear-gradient(rgba(20,50,156,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(20,50,156,.05) 1px,transparent 1px),
  linear-gradient(rgba(20,50,156,.11) 1px,transparent 1px),
  linear-gradient(90deg,rgba(20,50,156,.11) 1px,transparent 1px);
background-size:8px 8px,8px 8px,40px 40px,40px 40px;

Technique 06requestAnimationFrame + pointer events

เคอร์เซอร์กากบาทแบบ CAD

บนจอที่ใช้เมาส์ เส้นแนวนอน-แนวตั้งเต็มจอจะวิ่งตามเคอร์เซอร์ พร้อมพิกัด X·Y แบบโปรแกรมเขียนแบบ ตำแหน่งอัปเดตผ่าน requestAnimationFrame และขยับด้วย transform เท่านั้น (ไม่แตะ layout จึงไม่กระตุก) วงแหวนกลางขยายขึ้นเมื่อชี้ปุ่มหรือการ์ด บนมือถือและโหมดลดการเคลื่อนไหว ระบบนี้ปิดตัวเองอัตโนมัติ

Technique 07SVG feTurbulence data URI · mix-blend-mode

พื้นผิวกระดาษ (paper grain) โดยไม่มีไฟล์ภาพ

ชั้นความหยาบบาง ๆ ที่ทับทุกพื้นผิวของเว็บ ไม่ได้มาจากไฟล์รูป JPG ที่โหลดช้า แต่เป็น SVG ตัวกรอง feTurbulence (สุ่มลายจุดแบบ noise) เข้ารหัสเป็น data URI ฝังตรงใน CSS แล้ววางเป็น background-image ของชั้นทับด้วย mix-blend-mode:multiply ที่ความทึบ 5% — ได้พื้นผิวกระดาษใต้แสงจริง น้ำหนักไฟล์เป็นศูนย์ไบต์

background-image:url("data:image/svg+xml,...feTurbulence...");
mix-blend-mode:multiply; opacity:.05;

Technique 08scroll listener + rAF throttling

ไม้บรรทัดวัดความคืบหน้าทั้งหน้าเว็บ

เส้นบางใต้ Header ค่อย ๆ เติมเต็มตามสัดส่วนที่เลื่อนอ่านทั้งหน้า ขยายภาษา "เส้นบอกระยะ" ที่เป็นจุดขายของเว็บให้ครอบคลุมทั้งประสบการณ์ ไม่ใช่แค่ส่วนบ้านไอโซเมตริก คำนวณเปอร์เซ็นต์จาก scrollY ÷ (scrollHeight − innerHeight) แล้วสั่ง scaleX — ฟัง event scroll ตัวเดียวแต่หน่วงด้วย requestAnimationFrame เพื่อไม่ให้คำนวณถี่เกินจำเป็นและไม่กระทบเฟรมเรต

ExtraAccessibility & performance

กติกาที่มองไม่เห็นแต่สำคัญที่สุด

ทุกแอนิเมชันเคารพ prefers-reduced-motion (ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหวจะเห็นหน้าเว็บนิ่งครบเนื้อหา) เนื้อหาทั้งหมดอ่านได้แม้ JavaScript ล่ม เพราะสถานะ "ซ่อนก่อนเผย" จะทำงานก็ต่อเมื่อสคริปต์เติมคลาส js สำเร็จแล้วเท่านั้น ตัวหนังสือทุกจุดผ่านเกณฑ์ความต่างของสี (contrast) และปุ่มทุกปุ่มมีสถานะโฟกัสเป็นกรอบเส้นประ — เข้าธีมพิมพ์เขียวพอดี