ตัวสร้าง CSS View
Transition
จำลองเอฟเฟกต์การเปลี่ยนหน้าจอ "View Transition API"
และ CSS (::view-transition-old/new) บนเบราว์เซอร์ของคุณ
เลือกพรีเซ็ต
ดูตัวอย่าง
การตั้งค่า
※ จุดสิ้นสุด (To) สำหรับ ::view-transition-old (สถานะที่กำลังออกจากหน้าจอ)
※ จุดเริ่มต้น (From) สำหรับ ::view-transition-new (สถานะที่กำลังเข้าสู่หน้าจอ)
โค้ดที่สร้างขึ้น
ภาพรวมของตัวสร้าง CSS View Transition
ตัวสร้าง CSS View Transition เป็นเครื่องมือฟรีสำหรับนักพัฒนาที่ให้คุณออกแบบ ปรับแต่ง และดูตัวอย่างเอฟเฟกต์การเปลี่ยนหน้าจอที่ราบรื่นด้วย 'View Transition API' บนเบราว์เซอร์ได้อย่างง่ายดาย
ก่อนหน้านี้ การทำให้การเปลี่ยนหน้าจอทำได้อย่างราบรื่นใน SPA จำเป็นต้องใช้ไลบรารี JavaScript ที่ซับซ้อน แต่ตอนนี้คุณสามารถทำได้อย่างง่ายดายด้วยฟีเจอร์พื้นฐานของเบราว์เซอร์และ CSS เครื่องมือนี้ช่วยให้คุณสามารถปรับแต่งแอนิเมชัน (เลื่อน, ย่อขยาย, หมุน, ความโปร่งใส) สำหรับทั้งองค์ประกอบที่กำลังจะออกไป (สถานะเก่า) และองค์ประกอบที่เข้ามาใหม่ (สถานะใหม่) และสามารถสร้างเป็นโค้ด CSS, JavaScript (สำหรับ SPA) และ HTML (สำหรับ MPA) เพื่อนำไปใช้งานได้ทันที
การประมวลผลทั้งหมดเกิดขึ้นภายในเบราว์เซอร์ของคุณ การตั้งค่าและข้อมูลใดๆ จะไม่ถูกส่งไปยังเซิร์ฟเวอร์ภายนอก ทำให้คุณมั่นใจได้ในความเป็นส่วนตัวและความปลอดภัย
วิธีสร้างเอฟเฟกต์การเปลี่ยนหน้าจอ
เริ่มต้นด้วยการเลือกพรีเซ็ตหรือการตั้งค่าพื้นฐาน
เลือกพรีเซ็ตจากด้านบน เช่น 'จางหาย' หรือ 'เลื่อนไปทางซ้าย' จากนั้นกำหนดชื่อให้กับ "view-transition-name" เพื่ออ้างอิงองค์ประกอบที่คุณต้องการ
ดูตัวอย่างและปรับแต่งแอนิเมชัน
คลิกที่ปุ่ม "เล่น / สลับสถานะ" เพื่อดูการเปลี่ยนหน้าจอ จากนั้นลองปรับพารามิเตอร์ในแท็บ "แอนิเมชันขาออก" (เก่า) และ "แอนิเมชันขาเข้า" (ใหม่) เพื่อปรับแต่งให้ได้ผลลัพธ์ที่คุณต้องการ
คัดลอกโค้ดไปใช้
คัดลอกโค้ดที่สร้างขึ้นได้ที่ด้านล่าง มีแท็บสำหรับ CSS, JavaScript (สำหรับ SPA อย่าง React/Vue) และ HTML (สำหรับ MPA) เลือกคัดลอกและนำไปใช้ในโปรเจกต์ของคุณ
คำศัพท์เกี่ยวกับ View Transition
- View Transition API
- กลไกของเบราว์เซอร์ที่จะจับภาพหน้าจอ (ถ่ายภาพ) ของ DOM อัตโนมัติก่อนที่จะเปลี่ยนหน้า (สถานะเก่า) และหลังเปลี่ยนหน้า (สถานะใหม่) และสร้างการเปลี่ยนหน้าจออย่างลื่นไหล ช่วยให้คุณลดการกระตุกหรือหน้าจอขาวระหว่างโหลดหน้า โดยไม่ต้องพึ่งพาไลบรารี JS
- view-transition-name
- คุณสมบัติ CSS นี้ทำหน้าที่เสมือนเป็นป้ายชื่อ เบราว์เซอร์จะเชื่อมโยงองค์ประกอบที่มีชื่อเดียวกันจากหน้าเก่าและหน้าใหม่เข้าด้วยกันเพื่อสร้างการเคลื่อนไหว แต่หากในหน้าจอเดียวกันมีองค์ประกอบที่ใช้ชื่อซ้ำกัน ระบบจะทำงานผิดพลาดทันที ดังนั้นจึงจำเป็นต้องใช้ชื่อที่ไม่ซ้ำกัน
- ::view-transition-old / new
- `old` คือ pseudo-element ที่เป็นตัวแทนของ "สถานะที่ผ่านมาแล้ว" มีหน้าที่ในการแสดงเอฟเฟกต์เมื่อส่วนนี้กำลังจะหายไป `new` คือ "สถานะใหม่" ควบคุมเอฟเฟกต์การเข้าสู่หน้าจอ คุณสามารถใช้ CSS เขียนแอนิเมชันเพิ่มเพื่อตกแต่งให้ดูสวยงามได้ในส่วนนี้
- Cross-document View Transitions
- แต่เดิมแล้วฟีเจอร์นี้ออกแบบมาเพื่อใช้งานแบบ Single Page Application (SPA) แต่ปัจจุบัน Chrome อนุญาตให้ใช้งานกับเว็บไซต์แบบหลายหน้า (MPA) ได้ด้วย โดยไม่ต้องใช้ JS แค่เพิ่มแท็ก meta ลงในส่วน head เท่านั้น
คำถามที่พบบ่อย (FAQ)
- Q.ข้อมูลของฉันจะถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?
- ไม่ เครื่องมือนี้ทำงานทั้งหมดภายในเบราว์เซอร์ของคุณ ข้อมูลหรือการตั้งค่าใดๆ จะไม่ถูกส่งไปยังเซิร์ฟเวอร์ภายนอก สามารถใช้งานได้อย่างปลอดภัยแม้ในขณะออฟไลน์
- Q.เอฟเฟกต์ View Transition ทำงานได้บนทุกเบราว์เซอร์หรือไม่?
- ปัจจุบันรองรับบน Chrome 111+, Edge 111+, Safari 18+ เป็นต้น สำหรับเบราว์เซอร์ที่ไม่รองรับเช่น Firefox การเปลี่ยนหน้าจอจะทำงานในรูปแบบปกติทันที (progressive enhancement) โดยไม่ทำให้เว็บไซต์ของคุณเสียหาย
- Q.ฉันสามารถใช้สำหรับเว็บไซต์ทั่วไป (MPA) ได้หรือไม่?
- ได้ คุณสามารถใช้กับหน้าเว็บที่อยู่ในโดเมนเดียวกัน (same-origin) เพียงแค่เพิ่มแท็ก `<meta name="view-transition" content="same-origin" />` ในส่วน `<head>` และกำหนด `view-transition-name` ด้วย CSS คุณก็สามารถสร้างเอฟเฟกต์การเปลี่ยนหน้าจอได้โดยไม่ต้องเขียนโค้ด JavaScript
- Q.ฉันควรตั้งค่าอะไรสำหรับ view-transition-name?
- สามารถใช้ข้อความใดก็ได้ แต่ต้องไม่ซ้ำกันในหน้านั้น (เช่น `main-content`, `hero-image`, `card-123`) หากมีองค์ประกอบหลายส่วนใช้ชื่อเดียวกัน การเปลี่ยนหน้าจอจะเกิดข้อผิดพลาด สำหรับรายการ แนะนำให้เพิ่ม ID ที่ไม่ซ้ำกันลงในชื่อ
ตัวอย่างการใช้งาน
ตัวอย่างการนำ View Transition API ไปใช้ในการพัฒนาเว็บไซต์จริง
หน้ารายละเอียดสินค้าใน E-Commerce
เมื่อผู้ใช้คลิกภาพขนาดย่อในหน้ารายการสินค้า ภาพจะขยายใหญ่ขึ้นและเลื่อนไปยังตำแหน่งในหน้ารายละเอียดสินค้าอย่างราบรื่น ช่วยสร้างประสบการณ์ที่ดีและดึงดูดความสนใจของลูกค้าได้อย่างมีประสิทธิภาพ
UI สไตล์แอปมือถือ Native
เมื่อออกแบบ Web-app (เช่น PWA) การเปลี่ยนหน้าจอแบบปัดนิ้วซ้ายหรือขวาจะช่วยให้หน้าเว็บมีการเคลื่อนไหวราวกับว่าเป็นแอปพลิเคชันพื้นฐาน (Native App) เลยทีเดียว
การสลับโหมดมืด (Dark Mode)
แทนที่จะเปลี่ยนหน้าจอจากสีขาวเป็นสีดำทันที คุณสามารถเพิ่มเอฟเฟกต์ขยายวงกลมของสีดำแบบค่อยเป็นค่อยไปจากจุดที่ผู้ใช้คลิกเปลี่ยนโหมดได้
การจัดเรียงและกรองรายการ
เมื่อทำการกรองรายการ องค์ประกอบที่ถูกลบออกไปจะค่อยๆ จางหายไป ในขณะที่รายการที่ยังคงอยู่จะเลื่อนไปยังตำแหน่งใหม่อย่างลื่นไหล ทำให้ผู้ใช้เข้าใจความเปลี่ยนแปลงได้ทันที
ส่งความคิดเห็น
โปรดแจ้งให้เราทราบความคิดเห็นของคุณเพื่อช่วยปรับปรุงเครื่องมือ
การส่งความคิดเห็นถูกระงับชั่วคราว
เซิร์ฟเวอร์ไม่ว่างหรือระบบป้องกันสแปมทำงานอยู่ โปรดลองอีกครั้งในภายหลัง