BrU32

JS Earthquake Shake Animation SRC

Jul 17th, 2016
128
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.63 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <style>
  4. #animate {
  5. width: 80px;
  6. height: 80px;
  7. position: absolute;
  8. background-color: red;
  9. }
  10. </style>
  11. <body bgcolor="#000000">
  12. <p>
  13. <center>
  14. <button onclick="myMove()">Start Animation</button>
  15. </center>
  16. </p>
  17. <div id ="container">
  18. <div id ="animate"></div>
  19. </div>
  20. <script>
  21. function myMove() {
  22. var elem = document.getElementById("animate");
  23. var pos = Math.random()*5;
  24. var id = setInterval(frame, 50);
  25. function frame() {
  26. if (pos >= 600) {
  27. pos=0;
  28. pos++;
  29. elem.style.left = Math.ranodom()*pos + 'px';
  30. } else {
  31. pos++;
  32. elem.style.left = Math.random()*pos + 'px';
  33. }
  34. }
  35. }
  36. </script>
  37. </body>
  38. </html>
Advertisement
Add Comment
Please, Sign In to add comment