ทำแผนที่แบบง่ายๆ ด้วย CSS3 Transitions

วันนี้ผมเปิดคอมพิวเตอร์ขึ้นมา แล้วตามด้วยบราวเซอร์อย่าง Firefox หลังจากนั้น  Firefox ได้ทำการแจ้งเตือนอัพเดทเป็นเวอร์ชั่น 7 (Beta) ผมเลยนึกขึ้นได้ว่า ผมมีตัวอย่างการทดลองเขียน CSS3 สไตล์ง่อยๆ อยู่อันหนึ่งซึ่งเขียนไว้เมื่อวันที่ 16 พฤศจิกายน 2553

ก็ย้อนจากวันนี้ไปประมาณ 9 เดือน ซึ่งตอนนั้นผมเขียน และทดลองเล่นดู ปรากฎว่า มีบราวเซอร์รองรับแค่ 2 ตัว คือ Chrome และ Safari ซึ่งเป็น Webkit ทั้งคู่ จึงพับเก็บเอาไว้ก่อนไม่ได้เขียนอธิบายลงเว็บ

อย่างที่กล่าวมาข้างต้น ผมอัพเดท Firefox แล้ว และสามารถใช้ได้ จึงกลับไปงัดตัวอย่างง่อยๆ นี้ออกมา

ในตัวอย่างนี้การเขียน CSS หลักๆ ประกอบไปด้วย CSS Transitions มี CSS 2D Transformations รวมไปถึง CSS Backgrounds and Borders แถมด้วย CSS Selectors นิดหน่อย

ดู ตัวอย่างการทำแผนที่แบบง่ายๆ ด้วย CSS3 Transitions

บทความที่เกี่ยวข้องกัน แนะนำให้อ่านก่อนเพื่อเพิ่มความเข้าใจ

1. CSS3 Background
2. nth-child() และ not() ใน CSS Selectors
3. จาก CSS3 Transform ถึง CSS Motion Editor Designer

บทความนี้ จะคล้ายกับบทความเรื่อง HTML5 กับ CSS3 เมื่อเอามาทำ Photo Gallery เพราะมีการใช้ transition เหมือนกัน

สิ่งที่ทำให้ พื้นหลังที่เป็นรูปตึก ขยายและเลื่อนได้นั่นอยู่ที่ background-position และ  background-size ซึ่ง สองตัวนี้ ทูกทำให้เปลี่ยนค่าเมื่อเกิดการ Click ลงที่ <a> ที่มี href ชี้ไปที่ <blockquote> ที่มี id นั้นๆ อยู่ เมื่อเกิดเหตุการณ์แบบนี้ขึ้นที่ HTML ทางฝั่ง CSS เรียกว่า การโดน :target (Selector) ซึ่งเมื่อถูก :target แล้วไปไหนก็ให้สั่งการใน Property ของ CSS เองอีกทอดหนึ่ง เช่นคำสั่ง

 blockquote#sk:target~div { 
background-position: -100px -1200px !important; 
background-size: 140%; 
} 
blockquote#home:target { 
top: 145px; 
left: 480px; 
} 

ส่วนในกรณีที่ไม่ถูก :target เราก็สามารถเขียนแก้กลับได้ด้วย

 .bg>blockquote:not(:target) { 
z-index: -1; 
opacity: 0; 
}

อยากจะบอกแค่ว่า เนื้อหาเล็กๆ น้อยๆ นี้เป็นแค่ไอเดีย เพื่อให้หลายๆ คนที่สนใจเอาไปสร้างสรรค์ ดัดแปลง ทำต่อกันได้ หรือสามารถเอาไปประยุกต์กับเรื่องอื่นๆ อีกที

ดูตัวอย่าง การทำแผนที่แบบง่ายๆ ด้วย CSS3 Transitions

แปลกใจหละสิ ว่าทำไมมันไม่มีแผนที่
ปล. ผมลองกับ IE10 Preview แล้ว ตายสนิท ส่วน Opera 11.50 นั้น ยังไม่เข้าใจว่าการทำ Transition ให้กับ Backgound-size นั้นทำยังไง