jquery - Javascript animation ontop of a image -
is possible javascript animation ontop of image? if so, how?
this image, want add multiple stickmen walking around departments in map. tried using css , javascript failed, not able add stickmen ontop of picture.
the approach tried creating div elements stickmen pictures inside of them in img tags. tried using javascript animate specific divs. did not work.
there many ways this. here's simple example shows 2 ways:
- blue dot: using absolute positioning , jquery's
animate() - red dot: using css keyframe animations
function doanimate() { $("#animate").css({top: "76px", left: "204px"}).animate({top: "110px", left: "208px"}, 1000).animate({top: "110px", left: "97px"}, 1500).animate({top: "76px", left: "104px"}, 1000).animate({top: "76px", left: "204px"}, 1500); }; doanimate(); setinterval(doanimate, 5100);#image { height: 200px; width: 300px; } #animate { position: absolute; top: 100px; background-color: blue; height: 5px; width: 5px; border-radius: 50%; } #animatecss { position: absolute; background-color: red; height: 5px; width: 5px; border-radius: 50%; animation: testanimation 5.1s infinite; } @keyframes testanimation { 0% { top: 110px; left: 97px; } 20% { top: 76px; left: 104px; } 50% { top: 76px; left: 204px; } 70% { top: 110px; left: 208px; } 100% { top: 110px; left: 97px; } }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <img id="image" src="http://i.stack.imgur.com/egt7s.jpg" /> <div id="animate"></div> <div id="animatecss"></div>
Comments
Post a Comment