ประกอบเว็บด้วย HTML หลายหน้าเล็กๆ แทน SPA สไตล์ Jim Nielsen
นักพัฒนาที่ใช้ React หรือ Vue มานานคงคุ้นเคยกับ pattern ที่เปิดเมนูด้วย JavaScript สลับ state ใน component และจัดการ animation ด้วย CSS transition ใน DOM เดียวกัน Pattern แบบนี้กลายเป็นสมมุติฐานพื้นฐานของ frontend ยุคใหม่จนหลายคนลืมไปว่า browser ทำสิ่งเหล่านี้ได้เองมานานแล้ว
เมื่อวันที่ 3 พฤษภาคม 2026 Jim Nielsen นักพัฒนาเว็บที่ดูแล blog ส่วนตัวที่ blog.jim-nielsen.com เผยแพร่บทความสั้นชื่อ Reminder: You Can Stitch Together Lots of Little HTML Pages With Navigations For Interactions เพื่อย้ำว่า interaction บนเว็บจำนวนมากที่นักพัฒนาเลือกเขียนด้วย JavaScript สามารถทำได้ด้วยการแยกเป็น HTML หลายหน้าเล็กๆ แล้วใช้ navigation ของ browser เป็นกลไกหลัก เสริมด้วย CSS View Transitions ให้การเปลี่ยนหน้าดูลื่น
Tutorial นี้จะพาทำตามแนวคิดของ Nielsen step by step โดยสร้างเว็บตัวอย่างที่มีเมนูหลัก เปลี่ยนหน้าด้วย link ปกติ ใช้ View Transitions ทำ animation และจัดการ history ด้วย document.referrer ตามที่ Nielsen แนะนำ ทำเสร็จแล้วเว็บจะทำงานได้แม้ผู้ใช้ปิด JavaScript และยังลื่นบน browser สมัยใหม่
สิ่งที่ต้องเตรียมก่อนเริ่ม
Tutorial นี้ใช้แค่ browser, text editor และ local web server ไม่ต้องลง framework หรือ build tool ใดๆ
รายการที่ต้องเตรียม
Browser ที่รองรับ View Transitions API Chrome 111 ขึ้นไป Safari 18 ขึ้นไป หรือ Firefox 132 ขึ้นไป ตรวจ version ของ browser ปัจจุบันก่อนเริ่ม เพราะหากใช้ version เก่า การเปลี่ยนหน้าจะยังทำงานได้ปกติ แต่ animation จะไม่ขึ้น
Text editor VS Code, Sublime Text, Zed หรืออะไรก็ได้ที่เปิดไฟล์ HTML ได้
Local web server ใช้ Python (มากับ macOS และ Linux) หรือ Node.js ก็ได้ Tutorial นี้จำเป็นต้องเปิดผ่าน server เพราะ browser บางตัวจำกัด API บางอย่างเมื่อเปิดไฟล์แบบ file:// ตรงๆ
เวลาประมาณ 30 นาที สำหรับทำตามครบทุก step
พื้นฐานที่ต้องมี เข้าใจ HTML และ CSS ระดับพื้นฐาน รู้ว่า tag ทำหน้าที่อะไร ส่วน JavaScript ใน tutorial นี้ใช้น้อยมาก ไม่จำเป็นต้องเขียน JS เป็นเชิงลึกก็ทำตามได้
โครงสร้าง folder ที่จะสร้าง
เว็บตัวอย่างประกอบด้วย 4 หน้าหลัก หน้าแรก หน้าเมนู หน้า about และหน้า contact ทุกหน้าเป็น HTML แยกไฟล์ของตัวเอง ไม่มี router ไม่มี state machine
เริ่มจากสร้าง folder โครงการก่อน
mkdir small-html-demo
cd small-html-demo
mkdir menu about contact
touch index.html menu/index.html about/index.html contact/index.html style.cssโครงสร้างที่ได้จะเป็นแบบนี้
small-html-demo/
├── index.html
├── style.css
├── menu/
│ └── index.html
├── about/
│ └── index.html
└── contact/
└── index.htmlเหตุผลที่แต่ละหน้าใช้ชื่อ index.html ในแต่ละ folder คือเมื่อ deploy บน server จริง URL จะอยู่ในรูป /menu/, /about/, /contact/ ที่สะอาดกว่า /menu.html ทั่วไป
ข้อควรระวัง บน Windows ใช้ command md แทน mkdir และ type nul > filename แทน touch หรือใช้ Git Bash ที่มาพร้อม Git for Windows ก็ใช้ command Unix ได้
เปิด local server ให้พร้อม
เนื่องจาก View Transitions API ต้องการ same-origin policy ที่สมบูรณ์ การทดสอบจึงต้องเปิดผ่าน server แทน file:// ตรงๆ
หากเครื่องมี Python ติดตั้งไว้แล้ว (macOS และ Linux ส่วนใหญ่มีให้) เข้าไปที่ folder small-html-demo แล้วรัน command นี้
python3 -m http.server 8000หากใช้ Node.js แทน ลง package npx เป็น default แล้ว รัน command นี้แทน
npx serve -p 8000เปิด browser ไปที่ http://localhost:8000 จะเห็นหน้าว่าง ยังไม่มีอะไร เพราะยังไม่ได้เขียน HTML แต่ server พร้อมแล้ว
หากขึ้น error address already in use แปลว่า port 8000 ถูกใช้อยู่ เปลี่ยนเป็น port อื่น เช่น 8080 หรือ 3000 ได้เลย
เขียนหน้าแรกพร้อม link ไปเมนู
เปิดไฟล์ index.html แล้วใส่ HTML ตามนี้
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="view-transition" content="same-origin">
<title>หน้าแรก Small HTML Demo</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header>
<nav>
<a href="/menu/" class="menu-button">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor" stroke-width="2"/>
</svg>
<span>เมนู</span>
</a>
</nav>
<h1>Small HTML Demo</h1>
</header>
<main>
<p>เว็บตัวอย่างที่ใช้แค่ HTML กับ CSS View Transitions ไม่มี SPA framework ไม่มี router</p>
<p>กดที่ icon เมนูบนซ้ายเพื่อเปิดเมนู</p>
</main>
</body>
</html>จุดสำคัญที่ต้องสังเกต
meta tag view-transition บรรทัด <meta name="view-transition" content="same-origin"> เป็นการบอก browser ว่าหน้านี้ยินยอมให้ทำ View Transition กับการ navigate ระหว่างหน้าใน origin เดียวกัน ขาดบรรทัดนี้ animation จะไม่ขึ้น
link ไปเมนูเป็น anchor ปกติ ไม่มี onclick ไม่มี event listener ใช้ <a href="/menu/"> ตรงๆ ตามที่ Nielsen ระบุในบทความ การทำแบบนี้ทำให้ browser จัดการ history ให้เอง และยัง work ได้แม้ผู้ใช้ปิด JavaScript
ไม่มี script tag เลย หน้าแรกไม่มี JavaScript เพราะไม่จำเป็น
หลายคนพยายาม intercept link ด้วย event listener เพื่อทำ animation ก่อน navigate วิธีนี้ขัดกับเจตนารมณ์ของ pattern ปล่อยให้ browser navigate ตามปกติแล้วใช้ View Transitions API จัดการ animation ให้เป็น progressive enhancement แทน
เขียนหน้าเมนูพร้อมปุ่มปิดที่ฉลาด
เปิดไฟล์ menu/index.html แล้วใส่ HTML ตามนี้
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="view-transition" content="same-origin">
<title>เมนู Small HTML Demo</title>
<link rel="stylesheet" href="/style.css">
</head>
<body class="menu-page">
<header>
<nav>
<a href="/" class="close-button" onclick="document.referrer ? history.back() : window.location.href = '/'; return false;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2"/>
</svg>
<span>ปิด</span>
</a>
</nav>
<h1>เมนู</h1>
</header>
<main>
<ul class="menu-list">
<li><a href="/">หน้าแรก</a></li>
<li><a href="/about/">เกี่ยวกับเว็บนี้</a></li>
<li><a href="/contact/">ติดต่อ</a></li>
</ul>
</main>
</body>
</html>หัวใจของหน้านี้คือบรรทัด onclick ที่อยู่บน link ปุ่มปิด
document.referrer ? history.back() : window.location.href = '/'; return false;โค้ดบรรทัดนี้ทำสามอย่าง
1. ตรวจ document.referrer เพื่อดูว่าผู้ใช้เข้ามาหน้าเมนูจากหน้าอื่นภายในเว็บ หรือพิมพ์ URL /menu/ เข้ามาตรงๆ ถ้ามี referrer แปลว่ามาจากหน้าอื่น เช่น หน้าแรก กดปิดแล้วต้องการกลับไปยังหน้านั้น
2. เลือกพฤติกรรมการกลับ ถ้ามี referrer ใช้ history.back() เพื่อกลับหน้าก่อนหน้าโดยไม่เพิ่ม entry ใหม่ใน history ถ้าไม่มี referrer (กรณีเปิดผ่าน bookmark หรือพิมพ์ URL ตรงๆ) ใช้ window.location.href = '/' เพื่อ redirect ไปหน้าแรก
3. return false เพื่อยกเลิก default behavior ของ link ที่จะ navigate ไป / ปกติ ป้องกันไม่ให้เกิดทั้ง history.back() และการเดินทางไปหน้าใหม่พร้อมกัน
ผลลัพธ์ที่ได้คือ browser history จะสะอาด ไม่มี entry ซ้ำ และผู้ใช้กดปุ่ม Back ของ browser แล้วได้พฤติกรรมที่คาดหวัง
หากเขียน JavaScript ใน file แยกแทน inline onclick ระวังเรื่อง timing เพราะ link จะ navigate ไปก่อน script load เสร็จในบาง edge case Nielsen เลือกใช้ inline onclick ในตัวอย่างเพื่อให้ทุกอย่างทำงานทันที ตั้งแต่ HTML parser อ่านเจอ
เพิ่มหน้า about และหน้า contact
หน้าทั้งสองมีโครงคล้ายหน้าแรก เพิ่มเฉพาะเนื้อหาภายใน เปิดไฟล์ about/index.html แล้วใส่ตามนี้
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="view-transition" content="same-origin">
<title>เกี่ยวกับเว็บนี้ Small HTML Demo</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header>
<nav>
<a href="/menu/" class="menu-button">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor" stroke-width="2"/>
</svg>
<span>เมนู</span>
</a>
</nav>
<h1>เกี่ยวกับเว็บนี้</h1>
</header>
<main>
<p>เว็บนี้สร้างขึ้นเพื่อทดลองแนวคิดของ Jim Nielsen ที่เสนอให้ประกอบเว็บจาก HTML หลายหน้าเล็กๆ แทนการสร้าง SPA ขนาดใหญ่</p>
<p>ทุกหน้าทำงานได้แม้ปิด JavaScript และใช้ CSS View Transitions เป็น progressive enhancement สำหรับ browser สมัยใหม่</p>
</main>
</body>
</html>เปิดไฟล์ contact/index.html แล้วใส่ตามนี้
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="view-transition" content="same-origin">
<title>ติดต่อ Small HTML Demo</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header>
<nav>
<a href="/menu/" class="menu-button">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor" stroke-width="2"/>
</svg>
<span>เมนู</span>
</a>
</nav>
<h1>ติดต่อ</h1>
</header>
<main>
<p>หน้าติดต่อตัวอย่าง สร้างจาก HTML ปกติ ไม่มี form validation ด้วย JavaScript ในตัวอย่างนี้</p>
<p>หากต้องการ form ที่ส่ง data จริง ใช้ <code><form action="/submit" method="post"></code> ตามมาตรฐานเว็บ</p>
</main>
</body>
</html>สังเกตว่าทุกหน้ามี header เหมือนกัน มี link ไปเมนูที่ปุ่มเดียวกัน Pattern นี้ดูเหมือนจะทำให้เกิดการเขียนซ้ำ แต่ที่จริงแล้วเป็นจุดที่ template engine หรือ static site generator เข้ามาช่วยได้ดี ขั้นตอนนี้ tutorial เก็บไว้เป็น HTML ตรงๆ เพื่อความชัดเจน
เมื่อเริ่มทำเว็บจริง การเขียน header ซ้ำในทุกไฟล์เป็นเรื่องที่ไม่ควรทำ ใช้ static site generator เช่น Eleventy, Hugo หรือ Astro เพื่อ render ส่วนที่ใช้ซ้ำเป็น component แล้วได้ HTML pure ออกมาเหมือนกัน
เขียน CSS สำหรับ layout และ View Transitions
เปิดไฟล์ style.css ใน folder root แล้วใส่ตามนี้
@view-transition {
navigation: auto;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, sans-serif;
background: #ffffff;
color: #1a1a1a;
min-height: 100vh;
}
body.menu-page {
background: #1a1a1a;
color: #ffffff;
}
header {
display: flex;
align-items: center;
gap: 16px;
padding: 24px;
border-bottom: 1px solid currentColor;
}
header h1 {
font-size: 20px;
font-weight: 500;
}
nav a {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: inherit;
padding: 8px 12px;
border-radius: 6px;
transition: background 0.15s;
}
nav a:hover {
background: rgba(0, 0, 0, 0.05);
}
body.menu-page nav a:hover {
background: rgba(255, 255, 255, 0.1);
}
main {
padding: 32px 24px;
max-width: 720px;
}
main p {
margin-bottom: 16px;
line-height: 1.7;
}
.menu-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.menu-list a {
display: block;
padding: 16px 24px;
font-size: 24px;
text-decoration: none;
color: inherit;
border-radius: 8px;
transition: background 0.15s;
}
.menu-list a:hover {
background: rgba(255, 255, 255, 0.1);
}จุดสำคัญที่สุดของ CSS นี้อยู่บนสุด
@view-transition {
navigation: auto;
}คำสั่ง 3 บรรทัดนี้คือทั้งหมดที่ต้องเขียนเพื่อเปิด View Transitions ระหว่างหน้า เมื่อ browser navigate จากหน้าหนึ่งไปอีกหน้าหนึ่งใน origin เดียวกัน CSS นี้บอก browser ให้ snapshot หน้าเดิมและหน้าใหม่ แล้ว fade transition ระหว่างทั้งสองให้อัตโนมัติ
ทดลองเปิด http://localhost:8000 แล้วกดที่ icon เมนู สังเกตการเปลี่ยนหน้า บน Chrome 111 ขึ้นไปจะเห็น fade transition แทนการเปลี่ยนหน้าแบบกระตุก
หาก animation ไม่ขึ้น ตรวจสามจุด หนึ่งคือ browser version รองรับ View Transitions API หรือไม่ สองคือ meta tag view-transition อยู่ใน head ของทุกหน้าหรือยัง สามคือ CSS @view-transition rule อยู่ใน stylesheet ที่ load ทันใน head แล้วหรือไม่
กำหนด animation ให้ element ที่ต้องการเฉพาะ
View Transitions API ทำมากกว่าแค่ fade ระหว่างหน้า สามารถระบุได้ว่า element ใดควร transition แยกออกมา เช่น header ที่อยู่ทุกหน้าควรลื่นแทนที่จะ fade
เพิ่ม CSS นี้ต่อท้ายไฟล์ style.css
header {
view-transition-name: page-header;
}
::view-transition-old(page-header),
::view-transition-new(page-header) {
animation-duration: 0.3s;
animation-timing-function: ease-out;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.4s;
}คำสั่ง view-transition-name: page-header บอก browser ให้จัดการ header แยกจากส่วนอื่นของหน้า ทำให้ browser พยายาม morph header ระหว่างสองหน้าแทนการ fade ปกติ ส่วน pseudo-element ::view-transition-old และ ::view-transition-new ใช้ปรับ duration ของ animation ให้เร็วขึ้น
refresh browser แล้วกดเปลี่ยนหน้าอีกครั้ง สังเกต header ที่ตอนนี้จะ animate แบบลื่นกว่าเดิม
ระวัง view-transition-name ต้อง unique ในแต่ละหน้า หากใช้ชื่อเดียวกันกับ element หลายตัวในหน้าเดียว browser จะแสดง warning ใน console และ animation จะไม่ขึ้น
ทดสอบ pattern ทำงานเมื่อปิด JavaScript
หัวใจของ pattern นี้คือ graceful degradation เว็บต้องทำงานได้แม้ผู้ใช้ปิด JavaScript ทดสอบขั้นตอนนี้ใน Chrome ตามนี้
ขั้นที่ 1 เปิด DevTools (กด F12 หรือ Cmd+Option+I บน Mac)
ขั้นที่ 2 กด Cmd+Shift+P บน Mac หรือ Ctrl+Shift+P บน Windows เพื่อเปิด command palette ของ DevTools
ขั้นที่ 3 พิมพ์ disable javascript แล้วเลือก Disable JavaScript
ขั้นที่ 4 Refresh หน้า http://localhost:8000 จะเห็นว่าเว็บยัง load ได้ปกติ กดที่ icon เมนู link พา navigate ไปหน้า /menu/ ตามปกติ กด link เลือกหน้าใดๆ ก็พาไปหน้านั้นได้
จุดที่จะต่างคือเมื่อกดปุ่มปิดบนหน้าเมนู โดยปกติ onclick จะใช้ document.referrer แล้ว history.back() แต่เมื่อปิด JavaScript onclick ไม่ทำงาน browser จะ fallback ไปทำตาม href ปกติคือ navigate ไป / นั่นทำให้ปุ่มปิดยังทำงานได้แม้จะไม่ฉลาดเท่าตอนเปิด JavaScript
นี่คือหัวใจของคำกล่าวที่ Nielsen ระบุในบทความว่าหากตาม link ได้ ซึ่งเป็นสิ่งพื้นฐานที่สุดที่ browser ทำได้ ระบบก็จะทำงานได้
เปิด JavaScript กลับโดยทำขั้นตอนเดิมแล้วเลือก Enable JavaScript
การทดสอบกับ JavaScript ปิดเป็นนิสัยที่ดี เพราะผู้ใช้บางคนปิด JS ด้วยเหตุผลด้าน privacy บาง browser มี extension ที่ block script และ network ที่ช้ามากอาจทำให้ script load ไม่ทันก่อนผู้ใช้กด
ตรวจ history ทำงานสะอาด
หนึ่งในข้อดีหลักของ pattern นี้คือ browser history ที่สะอาดไม่มี entry ซ้ำ ทดสอบตามนี้
ขั้นที่ 1 เปิด http://localhost:8000 แล้วกดที่ icon เมนู เพื่อไปหน้า /menu/
ขั้นที่ 2 กดปุ่มปิดบนหน้าเมนู เพื่อกลับหน้าแรก
ขั้นที่ 3 กดเมนูอีกครั้ง กดปิดอีกครั้ง ทำซ้ำสามรอบ
ขั้นที่ 4 กดค้างที่ปุ่ม Back ของ browser เพื่อดู history dropdown
ที่ถูกต้องคือ history จะมีแค่หน้าแรก ไม่มี /menu/ ซ้ำหลายรายการ เพราะ history.back() ทำให้ browser ลบ entry แทนที่จะเพิ่ม ต่างจาก SPA หลายตัวที่ใช้ pushState ทุกครั้งที่เปิดเมนู ทำให้ history เต็มไปด้วย state ที่ผู้ใช้ไม่ต้องการกลับไป
หากทดสอบแล้ว history มี /menu/ ซ้ำหลายรายการ ตรวจว่า onclick handler return false หรือยัง การลืม return false จะทำให้ทั้ง history.back() และ default link behavior ทำงานพร้อมกัน เพิ่ม entry ใหม่ใน history แทนที่จะลบ
ทดสอบกรณีพิมพ์ URL ตรง
เงื่อนไข document.referrer จัดการกรณีที่ผู้ใช้เข้ามาหน้าเมนูตรงๆ จาก bookmark หรือพิมพ์ URL ทดสอบตามนี้
ขั้นที่ 1 เปิด tab ใหม่ใน browser
ขั้นที่ 2 พิมพ์ URL http://localhost:8000/menu/ ลงไป Address bar ตรงๆ แล้วกด Enter
ขั้นที่ 3 กดปุ่มปิด
ผลลัพธ์ที่ได้คือ browser ไม่ใช้ history.back() เพราะ document.referrer ว่าง (ไม่มีหน้าก่อนหน้า) แต่ใช้ window.location.href = '/' redirect ไปหน้าแรกแทน
ลองสลับการเข้าหน้าเมนูสองวิธีแล้วเปรียบเทียบ จะเห็นว่า Pattern นี้ฉลาดพอจัดการทั้งสองกรณีโดยไม่ต้องเขียน router หรือ state machine ใดๆ เลย
document.referrer มี edge case ที่ต้องระวัง หากผู้ใช้คลิก link จาก https origin ไปยัง http origin หรือ link มี attribute rel=noreferrer browser จะไม่ส่ง referrer ใน case ปกติของเว็บ origin เดียวกันที่ทำตาม tutorial นี้ ไม่มีปัญหานี้
เปรียบเทียบกับ pattern แบบ SPA
ลองนับจำนวน JavaScript ที่ใช้ในเว็บตัวอย่างนี้ ทั้งหมดมีแค่ inline onclick บรรทัดเดียวใน menu/index.html ไม่มี framework ไม่มี bundler ไม่มี state library
หากทำเว็บแบบเดียวกันด้วย React จะมีอย่างน้อย React, ReactDOM, react-router หรือ next/link, state management library อาจรวมถึง animation library อย่าง framer-motion เพื่อทำ transition แบบเดียวกัน
ขนาด bundle ที่ผู้ใช้ต้อง download ก่อนเว็บใช้งานได้ในแบบ React จะอยู่ที่หลายร้อย KB ส่วน pattern นี้ผู้ใช้ download แค่ HTML ที่ใช้กับ CSS เท่านั้น ขนาดรวมไม่เกินหลัก KB
นี่คือสิ่งที่ Nielsen ระบุในบทความว่าการใช้ primitive ของ browser ช่วยลดความจำเป็นในการเขียน router หรือ state machine ที่ SPA framework ต้องสร้างขึ้นเอง
Pattern นี้ไม่ได้บอกว่า SPA ผิดในทุกกรณี เว็บที่ต้องการ state ที่ persist ข้ามการ navigate เช่น music player ที่เล่นต่อเนื่อง หรือ editor ที่ต้องเก็บ unsaved changes ยังเหมาะกับ SPA แต่สำหรับเว็บส่วนใหญ่ที่เป็น content และ navigation pattern ที่ Nielsen เสนอเพียงพอ
ขั้นต่อไปที่ทำได้
Tutorial นี้ครอบคลุม pattern หลักของ Nielsen แล้ว ตั้งแต่การวาง structure ไฟล์ การใช้ navigation แทน in-page interaction การจัดการ history ด้วย document.referrer และการเปิด View Transitions ผ่าน CSS
ขั้นต่อไปที่ลองได้
เพิ่ม static site generator ใช้ Eleventy หรือ Astro เพื่อ render template ส่วน header ที่ใช้ซ้ำในทุกหน้า ออกมาเป็น HTML pure ที่ deploy บน static host ได้
เพิ่ม view-transition-name ให้ element ที่สำคัญ เช่น hero image ที่ปรากฏในหลายหน้า ทำให้ browser morph element ระหว่างหน้าแบบ shared element transition
ลองทำ overlay pattern อื่น เช่น modal กล่อง search box หรือ sidebar เป็นหน้าแยกตามแนวคิดนี้ สังเกตว่า design ต้องเปลี่ยนอย่างไรให้เหมาะกับการแยกเป็นหน้า
ทดสอบบน slow network ใช้ DevTools throttling เป็น Slow 3G แล้ววัดว่า pattern นี้ load เร็วกว่า SPA ขนาดใหญ่จริงหรือไม่
การทำตาม tutorial นี้ทำให้เห็นว่า browser ทำสิ่งที่ SPA framework เลียนแบบมานานนับสิบปีได้ตั้งแต่แรก View Transitions API ปลดล็อก animation ที่เคยเป็นเหตุผลเดียวให้ต้องใช้ SPA และทำให้ multi-page navigation pattern กลับมาเป็นทางเลือกที่จริงจัง สำหรับเว็บที่เน้น content และ navigation
แหล่งอ้างอิง
บทความที่เกี่ยวข้อง
ความคิดเห็น
ยังไม่มีความคิดเห็น เป็นคนแรกที่แสดงความเห็น!