รู้จักทรานซิชั่นใน HTML5
ทรานซิชั่นเป็นความสนุกที่ได้ทำให้ฟีเจอร์ต่างๆ ที่ทำงานได้ใน IE9 แต่ปัจจุบันนี้ไม่ได้รองรับบน IE แล้ว แต่ก็มี Opera, Firefox และ Webkit ล้วนรองรับทรานซิชั่นด้วย CSS เกือบทุกตัว
ทรานซิชั่น
ทรานซิชั่นเป็นความสนุกที่ได้ทำให้ฟีเจอร์ต่างๆ ที่ทำงานได้ใน IE9 แต่ปัจจุบันนี้ไม่ได้รองรับบน IE แล้ว แต่ก็มี Opera, Firefox และ Webkit ล้วนรองรับทรานซิชั่นด้วย CSS เกือบทุกตัว
ทรานซิชั่นสามารถใช้ค่าของพร็อปเพอร์ตี้ใน CSS เพื่อทำการเปลี่ยนแปลงตามช่วงเวลา โดยเฉพาะการทำแอนิเมชั่นแบบง่ายๆ ตัวอย่าง ถ้าลิงก์เปลี่ยนสีเมื่อโฮเวอร์ เราสามารถทำให้สีค่อยๆ จางลง และเปลี่ยนเป็นอีกสีหนึ่งได้แทนที่จะเปลี่ยนสีไปทันที
ในลักษณะเดียวกัน ถ้าเราสร้างความเคลื่อนไหวให้กับทรานส์ฟอร์มใดๆ ที่เราเพิ่งทำไป เพื่อทำให้หน้าเว็บของเราดูมีความเคลื่อนไหวมากขึ้นได้
แอนิเมชั่นเป็นสิ่งที่เป็นได้ในบางครั้งด้วยการใช้จาวาสคริปต์ แต่ทรานซิชั่นโดย CSS นั้น ต้องการการประมวลผลในฝั่งผู้ใช้ที่น้อยลง ดังนั้น โดยทั่วไปแล้วมันจะเคลื่อนไหวได้นุ่นนวลกว่า โดยเฉพาะอย่างยิ่งในอุปกรณ์พกพาที่มีพลังการประมวลผลจำกัด
ทรานซิชั่น CSS จะถูกประกาศควบคู่ไปกับสไตล์ปกติของอิลิเมนต์ เมื่อใดก็ตาม ที่พร็อปเพอร์ตี้ของเป้าหมายเปลี่ยนไปเบราเซอร์ก็จะใช้งานทรานซิชั่น เพราะโดยทั่วไปทรานซิชั่นเกิดจากสไตล์ที่แตกต่างกัน เมื่ออยู่ในสถานะโฮเวอร์ อย่างไรก็ตาม ทรานซิชั่นก็ทำงานได้เหมือนกัน ถ้าพร็อปเพอรตี้ถูกเปลี่ยนไปใช้จาวาสคริปต์ ดังตัวอย่างต่อไปนี้
เบราเซอร์ที่รองรับ
ผลลัพธ์ที่ได้
ไอทีจีเนียส เอ็นจิเนียริ่ง ให้บริการด้านไอทีครบวงจร
ทั้งงานอบรม (Training) สัมมนา รับเขียนโปรแกรม เว็บไซต์ แอปพลิเคชัน งานออกแบบกราฟิก และงานด้าน E-Marketing ทั้ง SEO, PPC และ Social Media Marketing
ติดต่อเราเพื่อสอบถามผลิตภัณฑ์ ขอราคา หรือปรึกษาเรื่องไอทีได้เลยค่ะ
แนะนำหลักสูตรที่น่าสนใจ
HTML5 and Modern CSS
เบราว์เซอร์ทุกค่ายวันนี้รองรับความสามารถใหม่ของ HTML และ CSS ที่เมื่อก่อนต้องพึ่ง JavaScript หรือไลบรารีภายนอก ทั้งฟอร์มที่ตรวจข้อมูลได้เอง หน้าต่าง Dialog และ Popover เลือก Style จากสิ่งที่อยู่ข้างในด้วย :has() Component ที่ปรับขนาดตามพื้นที่จริงด้วย…
HTML5, CSS and Bootstrap 5
หน้าเว็บที่ดีต้องมีโครงสร้างถูกต้อง ใช้งานง่ายทั้งบนมือถือและคอมพิวเตอร์ และดูน่าสนใจ ความสามารถในตัวของ HTML5 และ CSS ทำได้มากกว่าที่หลายคนคิด ตั้งแต่ฟอร์มที่ตรวจข้อมูลเอง วิดีโอพร้อมคำบรรยาย ไปจนถึงเอฟเฟกต์ไล่สี เงา และการเคลื่อนไหว เมื่อนำมาใช้คู่กับ…