Cloud Stack Ninja

how to create animated javascript with oval / circular path pattern ? I wanted to make it twisted, but I had a hard time. this is like some moving object on a soccer field. and move along the pattern.

enter image description here enter image description here

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Race Runing</title>
  div {
    position: absolute;
    background-color: #EEE;
    left: 50px;
    width: 50px;
    height: 50px;
    margin: 5px;
    border-radius: 50%;

    background-color: red;

  <script src=""></script>
<button id="leftobjek1">Go Back 1 Step</button>
<button id="rightobjek1">3 Step Forward</button>

<div class="block1"> Object 1</div>

//with conditions 1 step equals 50px

$( "#rightobjek1" ).click(function() {
  $( ".block1" ).animate({ "left": "+=150px" }, "slow" );
$( "#leftobjek1" ).click(function(){
  $( ".block1" ).animate({ "left": "-=50px" }, "slow" );


Read more here:

Content Attribution

This content was originally published by Skyline Gaming at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: