7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CSS Animation

15 ตัวอย่างสร้างแรงบันดาลใจในการทำ CSS Animation บน CodePen

Read Time: 2 mins

Thai (ภาษาไทย) translation by Porrapat Petchdamrongskul (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 มากๆ ที่ทำเราสามารถเรียนรู้และแชร์สิ่งๆ ต่างๆ ได้ง่ายดายกว่าที่เคยทำมา แล้วตัวอย่างแอนนิเมชันที่คุณชื่นชอบที่สุดคืออะไรหล่ะ ลองมาคุยกัน

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.