Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Animation
Webdesign

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

by
Length:LongLanguages:

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
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.