สอนทำเว็บไซต์-css-animation

การทำ CSS Transition ทำเว็บไซต์ให้มีลูกเล่น

การทำ CSS Transition ทำเว็บไซต์ให้มีลูกเล่น



การทำ CSS Transition ทำเว็บไซต์ให้มีลูกเล่น
การทำ CSS Transition และการทำ CSS Animation เป็นการเพิ่มลูกเล่นให้กับเว็บไซต์ให้ดูน่าสนใจมากยิ่งขึ้น ทำให้ผู้ใช้งานเว็บไซต์ได้รู้สึกว่าเว็บไซต์มีปฏิสัมพันธ์กับผู้ใช้งานมากยิ่งขึ้น การทำ transition คือการปรับเปลี่ยนคุณลักษณะของวัตถุจากรูปแบบหนึ่งไปยังอีกรูปแบบหนึ่ง ส่วนการทำอนิเมชั่นคือการทำการเคลื่อนไหวหรือเคลื่อนย้ายตำแหน่ง ขนาด องศา เป็นต้น


รู้จักคุณสมบัติของ CSS Transition

การทำงานของคำสั่ง transition ในภาษา CSS จะประกอบไปด้วย Property 4 ส่วนหลัก ๆ คือ

  • transition-delay
    คือระยะเวลาเป็นตัวเลขวินาทีก่อนที่จะให้เริ่มการทำงาน ตัวอย่างเช่น

  • transition-duration
    คือระยะเวลาในการแสดงผลจากคุณลักษณะแรกไปยังคุณลักณะที่สอง สรุปช้าหรือเร็วสามารถกำหนดได้จาก Property นี้ได้เลยนั่นเอง ตัวอย่างเช่น

  • transition-property
    คือคุณสมบัติของ div หรือ element ที่เราต้องการให้เปลี่ยนแปลง เช่น background-color, color, border-color เป็นต้น ตัวอย่างเช่น ถ้าเราต้องการเปลี่ยนสีพื้นหลัง

  • transition-timing-function
    คือรูปแบบหรือลักษณะในขณะที่กำลังเปลี่ยนแปลง ค่าเริ่มต้นจะเป็น ease และมีให้เลือกอีกมากมายเช่น linear, ease-in, ease-out, ease-in-out เป็นต้น


การใส่ CSS Transition ให้ class และ id

ยกตัวอย่างการใช้งาน ตัวอย่างเช่น ถ้าเราต้องการเปลี่ยนสีพื้นหลังของ div เมื่อมีการ hover ที่ div นั้น ๆ เราสามารถเขียนคำสั่ง ก่อน และ หลัง ได้ดังนี้

จากตัวอย่างโค๊ดด้านบนจะเห็นว่า เริ่มต้น เราได้กำหนดสีพื้นหลังคือ background-color มีค่าเท่ากับสีเขียวคือ #9C0 และเมื่อมีการ hover เราได้เปลี่ยนให้สีพื้นหลังเป็นสีฟ้าคือ #09F หากเราไม่ใช้คำสั่ง transition เข้าไปช่วยพื้นหลังก็จะเปลี่ยนสีทันที แต่ถ้าหากเราใส่คำสั่ง transition เข้าไป พื้นหลังของคลาส content ก็จะค่อย ๆ เปลี่ยนสีตามระยะเวลา transition-duration นั่นเอง

การเขียน CSS Transition ให้สั้นลง

จากหัวข้อการใช้งานด้านบนจะเห็นว่าเราในการใช้งานคำสั่ง transition ให้แต่ละ div หรือ html element นั้นต้องเขียนคำสั่งยืดยาวเหลือเกิน เราสามารถปรับการเขียนให้สั้นลงได้ แต่ยังคงมีผลลัพธ์การทำงานเหมือนกัน โดยสามารถเขียนได้ดังนี้


ปรับให้ CSS Transition ใช้งานได้ทุก Browser

จากตัวอย่างโค๊ดด้านบนหากเรานำไปใช้งาน ก็จะเจอปัญหาว่า เมื่อเปิดใช้งานในบาง browser จะไม่สามารถทำงานได้ เราจำเป็นจะต้องเพิ่มคำสั่งเพื่อให้ transition สามารถใช้งานได้ทุก browser ซึ่งคำสั่งก็ไม่ได้ยุ่งยากอะไร สามารถเขียนได้ในลักษณะดังนี้ครับ


กระทู้ใกล้เคียง

วิธีใช้ jQuery โหลดเนื้อหาเพิ่มเมื่อเลื่อนสุดหน้าจ... วิธีใช้ jQuery โหลดเนื้อหาเพิ่มเมื่อเลื่อนสุดหน้าจอ วิธีใช้ jQuery โหลดเนื้อหาเพิ่มเมื่อเลื่อนสุดหน้าจอ เคยสังเกตุไหมครับว่าเวลาเราใช้งาน facebook...
CSS วิธีทำ Mask แสดงกรอบรูปเป็นวงกลม... CSS วิธีทำ Mask แสดงกรอบรูปเป็นวงกลม CSS วิธีทำ Mask แสดงกรอบรูปเป็นวงกลม แนะนำวิธีทำรูปโปรไฟล์ หรือรูป Avatar บนเว็บไซต์ให้มีกรอบรูปวงกลมคล้าย ...
สอน codeigniter ทำ url ให้สั้นและสวยด้วย _remap... สอน codeigniter ทำ url ให้สั้นและสวยด้วย _remap สอน codeigniter ทำ url ให้สั้นและสวยด้วย _remap จุดประสงค์หลักของการทำ Remapping Method Calls หรือ...
PHP Codeigniter เน้นใช้งาน : ตอน 1 ดาวน์โหลดและติด... PHP Codeigniter : ตอน 1 ดาวน์โหลดและติดตั้ง codeinginter PHP Codeigniter เป็น MVC framework ที่ได้รับความนิยมและใช้ในงานพัฒนาเว็บไซต์กันอย่างแพร่หล...