Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create animations using JavaScript?
To create animations using JavaScript, the code is as follows −
Example
<!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> Output
The above code will produce the following output −
On clicking the “Start Animation” button −
Updated on: 2020-05-12T12:28:03+05:30
310 Views
Advertisements