() translation by (you can also view the original English article)
CodePen นั้นกลายเป็นสถานที่ลองของและแสดงผลงานของใครหลายคนที่ทำงานเกี่ยวกับเว็บ นี่คือรายการล่าสุดที่เรียกว่าสุดยอดการสร้าง CSS Animation ที่สร้างแรงบันดาลใจ เอามารวมด้วยกัน
1. JavaScript Mickey Watch - นาฬิกามิกกี้เม้าส์
Apple watch like Mickey watch โดย Jay Salvat (@jaysalvat)
ตัวอย่างที่น่ารักนี้ใช้ความรู้เรื่อง CSS transition, SVG graphic และ JavaScript เข้าด้วยกันเพิ่มสร้างนาฬิการูปมิกกี้เม้าส์ออกมาแบบนี้
2. CSS Submarine - เรือดำน้ำที่สร้างโดย CSS
Submarine with CSS โดย Alberto Jerez (@ajerez).
การใช้งานเรื่องวงกลม การเจาะรูทำหน้าต่างเรือ เป็นส่วนที่ดีมาก ทำให้สามารถสร้างเรือดำน้ำที่เคลื่อนไหวได้โดยการเขียนโค้ด CSS มันทำงานได้ยังกับร่ายเวทย์มนต์เลยทีเดียว
3. ASCII AT-AT - ยาน AT-AT ที่สร้างด้วยอักขระ ASCII
AT-AT โดย Tim Pietrusky (@TimPietrusky).
ยานส่วนตัว AT-AT ที่ได้แรงบันดาลใจจากเรื่อง Star Wars วาดโดยใช้ตัวอักษรและลงสีสลับกันโดยใช้ CSS เอกเฟกต์นี่แนวมากเลย
4. SVG/CSS Loader - หน้าจอโหลดโปรแกรมที่เขียนด้วย SVG/CSS
Loader SVG/CSS โดย Bidji (@Bidji).
Loader ตัวนี้ใช้การเปลี่ยนสีต่างๆ ทำให้เกิดความประทับใจในรูปแบบนี้
5. 3D CSS Tardis - กล่อง Tardis แบบ 3D ที่สร้างโดย CSS
3D CSS Tardis โดย Gerwin van Royen (@Gerwinnz)
CSS นั้นสามารถใช้สร้าง 3D เอฟเฟกต์ที่น่าตื่นตาตื่นใจแบบนี้ได้เช่นกัน นี่คือ 3D Tardis
6. Dozing Bird - นกน้อยง่วงแล้ว
Dozing Bird โดย Peter Klein (@pmk)
ด้วยการใช้สไตล์ทางศิลปะแบบง่ายๆ และการใช้ animation อีกเล็กน้อยอีกส่วนหนึ่ง เราก็จะได้เจ้านกง่วงนอนออกมาสู่โลกภายนอกแบบนี้
7. Pure CSS border animation - การทำ border animation โดยใช้ CSS ล้วนๆ
Pure CSS border animation without SVG โดย Rplus (@rplus)
นี่แหละ แนวทางที่ง่ายที่สุดในการใช้ CSS border มาสร้าง loading animation
8. Star Wars: The Force Awakens - สตาร์วอร์ส: อุบัติการณ์แห่งพลัง!
Star Wars: The Force Awakens in CSS โดย Donovan Hutchinson (@donovanh)
ไตเติ้ลจากหนังเรื่อง Star Wars สร้างโดยใช้ CSS, HTML และ JavaScript อีกเพียงเล็กน้อย
9. 3D Synth - เครื่องสังเคราะห์เสียงแบบ 3D
Pure CSS 3D Synthesizer (mousedown for rotation) โดย Nikolay Talanov (@suez).
ลองกดปุ่มต่างๆ และเล่นกับ 3D synth ที่สร้างโดยใช้ CSS ดูสิ สุดยอดเลยไหมหล่ะ
10. Cascading Solar System - ระบบสุริยะแบบวาดซ้อนกัน
Cascading Solar System! โดย Tady Walsh (@tadywankenobi)
การจำลองโมเดลของระบบสุริยะของเรา ด้วยการจัดความเร็วการหมุน ดวงจันทร์ และ รายละเอียดอื่นๆ สำหรับดาวเคราะห์ดวงใหญ่ๆ แต่ละดวง ดวงอาทิตย์นั้นดูสดใสเหมือนของจริงเลยทีเดียว!
11. 3D Solar System - ระบบสุริยะแบบ 3D
Full CSS 3D Solar System โดย Wayne Dunkley (@waynedunkley)
ตัวอย่างระบบสุริยะอีกอัน แต่อันนี้มาในรูปของ 3D เลย ตัวอย่างนี้ประยุกต์ใช้เรื่อง shading ได้อย่างสวยงามมาก
12. Flat Design Camera - กล้องสไตล์ Flat Design
Flat design camera with CSS animation โดย Damien Pereira Morberto (@damienpm)
ลองกดชัตเตอร์บนกล้องตัวนี้ดูสิ ว่ามันสร้างรูปภาพจาก CSS animation ได้หรือไม่
13. Day and Night Transition - ภาพเคลื่อนไหวกลางวันและกลางคืน
Day Night simulation โดย Szymon Stypa (@Catagen).
แค่กดปุ่มแล้วดูผลลัพธ์การเปลี่ยนแปลงจากกลางวันไปกลางคืน
14. Animated Sprite with CSS - การใช้ Sprite ทำแอนิเมชันด้วย CSS
Animate sprite with CSS โดย Avaz Bokiev (@samarkandiy)
ตัวอย่างที่แสดงถึงรูปภาพที่เก็บไว้เป็นลำดับภาพ (sprite) สามารถใช้เพื่อสร้าง stop-motion animation มันสมบูรณ์แบบด้วยการเคลื่อนที่แบบไปข้างหน้าและเคลื่อนที่ย้อนหลัง
15. Dodecahedron - ทรงสิบสองหน้า
Dodecahedron โดย wontem (@wontem)
ทรงสิบสองหน้าที่สวยงามและแสนบอบบางนี้ถูกสร้างขึ้นและทำให้มันเคลื่อนไหวด้วย CSS ทั้งนั้น
บทสรุป
อีกไม่นาน เราจะต้องทิ้ง Flash หรือ JavaScript สำหรับการทำ Animation ไปแล้ว บราวเซอร์รุ่นใหม่ๆ นั้นให้การ support CSS ด้วยเทคโนโลยี hardware accelerated 3D และการทำแอนนิเมชัน
ขอบคุณเว็บไซต์ CodePen มากๆ ที่ทำเราสามารถเรียนรู้และแชร์สิ่งๆ ต่างๆ ได้ง่ายดายกว่าที่เคยทำมา แล้วตัวอย่างแอนนิเมชันที่คุณชื่นชอบที่สุดคืออะไรหล่ะ ลองมาคุยกัน
