Skip to main content
0

คราวที่แล้วเราได้สอนการทำ css animation แบบเบื้องต้นกันมาแล้ว แต่คราวก่อนเป็นการทำ animation แบบของชิ้นเดียวเคลื่อนไหวไปมาเท่านั้น วันนี้เรามาลองทำแบบเอาหลายๆรูปมาใส่ animation เพื่อประกอบกันเป็นรูป animation กัน โดยจะมาทำเป็นรูปไดโนเสาร์จ้าวเก่ากับห้วงอวกาศแบบนี้ พร้อมแล้ว….ลุย!!

See the Pen
jOPQwWX
by PacharaC (@b2dpcr)
on CodePen.

มาเริ่มกันเลย!!

ก่อนอื่นนำ div ที่มีเป็นไดโนเสาร์ มาซ้อนกับ div ของรูปโลกและจัดตำแหน่งให้เหมาะสมแบบนี้

See the Pen
LYVXjzB
by PacharaC (@b2dpcr)
on CodePen.

จากนั้นสร้าง @keyframe แล้วใส่ animation spin ตามโค้ดต่อไปนี้

@keyframes spin {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(360deg);
                }
            }

และเพิ่ม css property ในส่วนของโลกว่า

                animation-name: spin;
                animation-duration: 10s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;

และไดโนเสาร์

                animation-name: spin;
                animation-duration: 1s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;

จะเห็นว่าproperty ที่ใส่นั้นใกล้เคียงกันต่างกันแค่เวลา แต่ความแตกต่างเพียงเท่านี้ก็ได้ผลลัพธ์ที่แตกต่างกันแล้ว

See the Pen
GRJwvOa
by PacharaC (@b2dpcr)
on CodePen.

ต่อไปนำโลกมาใส่ในชั้นของอวกาศจัดตำแหน่งให้เรียบร้อย

See the Pen
OJVajqy
by PacharaC (@b2dpcr)
on CodePen.

และใส่animation spin เช่นเดียวกันแต่ใส่ระยะเวลาเป็น 100 วินาที

See the Pen
ExjOvRE
by PacharaC (@b2dpcr)
on CodePen.

ต่อไปก็ถึงคราวพระอาทิตย์แล้ว แต่รอบนี้เราจะให้ animation เป็นแบบย่อขยายขนาดแทนให้เพิ่ม @keyframe scale ลงไป

@keyframes scale{
                0% {
                      transform: scale(1) ;
                   }
                50% {
                      transform: scale(0.8) ;
                    }
                100% {
                       transform: scale(1) ;
                     }
          }

See the Pen
VwLVzqN
by PacharaC (@b2dpcr)
on CodePen.

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

Extra!!

ลองนำพระอาทิตย์มาใส่ spin เร็วๆก็ดูดีไปอีกแบบนะ * – *

See the Pen
PoqxJqN
by PacharaC (@b2dpcr)
on CodePen.

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน และ เทคโนโลยีของตัวเอง ?

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

Developer

Author Developer

More posts by Developer
Close Menu

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้
    รายละเอียดคุกกี้

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า