เพื่อสร้างแอนิเมชันด้วย JavaScript โค้ดมีดังนี้
ตัวอย่าง
<!DOCTYPE html> <html> <style> body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } button{ padding:10px; font-size: 18px; background-color: blue; color:white; border:none; margin-bottom:10px; } .Animation { width: 60px; height: 60px; position: absolute; background-color: rgb(134, 25, 207); } </style> <body> <h1>Animation using JS example</h1> <button onclick="startAnimation()">Start Animation</button> <div class ="Animation"></div> <script> function startAnimation() { var elem = document.querySelector(".Animation"); var pos = 0; var id = setInterval(frame, 10); function frame() { if (pos == 450) { clearInterval(id); } else { pos++; elem.style.borderRadius = pos/14 + 'px'; elem.style.left = pos + 'px'; } } } </script> </body> </html>ผลลัพธ์
โค้ดข้างต้นจะสร้างผลลัพธ์ดังนี้ -
เมื่อคลิกปุ่ม "Start Animation" -
